文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在缩放/获取当前缩放值JVectorMap时使标记变大

问如何在缩放/获取当前缩放值JVectorMap时使标记变大
EN

Stack Overflow用户

提问于 2017-08-11 18:09:15

回答 1查看 1.1K关注 0票数 2

所以我希望在它放大多少之后，这些标记就会变大。我想我可以知道如何使标记大小取决于缩放值，但我不知道如何获得缩放值。

我试图找到一些有关这方面的文件，但似乎没有。

所以我希望你们中的一个聪明的人知道:)

感谢所有的帮助

编辑：

所以我把地图绘制成：

<div id="world-map" style="vertical-align: middle; width: 100%; height: 460px;"></div>

要制作地图脚本，我有一个php文件，在文件夹中查找其他文件夹，其中包含相应的地名和坐标文件(这个系统的原因是，当您按下标记时，我可以打印文件夹内的图片，您可以从这个地方看到图片)。

php脚本响应如下：

$(function(){
  $("#world-map").vectorMap({
  map: "world_mill",
   scaleColors: ["#C8EEFF", "#0071A4"],
normalizeFunction: "polynomial",
zoomMax: 1000,

hoverOpacity: 0.7,
onMarkerClick: function(e, code){
  var mapObj = $("#world-map").vectorMap("get", "mapObject");
var idx = code; // optional
var name = mapObj.markers[idx].config.name;
var latitude = mapObj.markers[idx].config.latLng[0];
var longitude = mapObj.markers[idx].config.latLng[1];
namePlace = name;
$.ajax({                    
url: "updatePlace.php",     
type: "GET", // performing a POST request
data : {
  data1 : name // will be accessible in $_POST["data1"]
},
dataType: "json",                   
success: function(data)         
{

placesArray = data;  
newPlace();
} 
});
},
hoverColor: false,
markerStyle: {
  initial: {
    r: 2,
    fill: "#188a9a",
    stroke: "#383f47"
  }
},
backgroundColor: "#383f47",
//this will be done for each folder
markers: [{latLng: [" . $long . ", " . $lati ."], name: '" . $placeFolder[$i] ."'}]; 
] });
});

php回波是通过使用cookie在html代码中打印的。无论我在php中响应什么，都将与在html文件中用脚本编写它一样。

jvectormap

javascript

jquery

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-08-12 20:02:47

假设您使用的是jVectorMap的标准内置标记，则不能使用CSS来增加标记的宽度，因为radius是SVG属性。

下面是一个示例，说明如何通过直接设置jVectorMap属性来增加radius标准圆形SVG标记的大小。放大后，您将看到标记不断扩展。

$(document).ready(function () {
  $("#map").vectorMap({
    map: "world_mill",
    backgroundColor: "aliceblue",
    zoomOnScroll: true,
    regionStyle: {
      initial: { fill: "lightgrey" }
    },
    markerStyle: {
      initial: { fill: '#F8E23B', stroke: '#383f47' }
    },
    markers: [
      {latLng: [40.372338, 49.85211], name: 'BAKU'},
      {latLng: [1.291432, 103.86391], name: 'MARINA BAY'},
      {latLng: [47.581711, 19.250611], name: 'HUNGARORING'} 
    ],
    onViewportChange: function(event, scaleFactor){
      var map = $("#map").vectorMap("get", "mapObject");
      if(map) {
        var markers = map.markers,
            min = 5, 
            max = 18,
            r = ~~Math.min(Math.max(min * scaleFactor, min), max);
        for(var m in markers) {
          var el = markers[m].element,
              style = el.config.style;
          el.shape.node.setAttribute('r', r);
          style.initial.r = r;
          style.hover.r = r;
        }
      }
    }
  });
});

<html>
<head>
  <link rel="stylesheet" href="http://jvectormap.com/css/jquery-jvectormap-2.0.3.css" type="text/css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="http://jvectormap.com/js/jquery-jvectormap-2.0.3.min.js"></script>
  <script src="http://jvectormap.com/js/jquery-jvectormap-world-mill.js"></script>
</head>
<body>
  <div id="map" style="width: 600px; height: 400px"></div>
</body>
</html>

由于您还没有在您的问题中指定如何定义标记，以及您需要的大小，您可以使用这个示例来调整它(但是，我相信这是一个很好的起点)。

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45641395

复制

相似问题

问如何在缩放/获取当前缩放值JVectorMap时使标记变大
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在缩放/获取当前缩放值JVectorMap时使标记变大EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在缩放/获取当前缩放值JVectorMap时使标记变大
EN