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

【问题标题】：How to make the markers get bigger on zoom/getting current zoom value JVectorMap如何使标记在缩放/获取当前缩放值 JVectorMap 时变大
【发布时间】：2017-08-13 04:10:12
【问题描述】：

所以我希望标记在放大多少后变得更大。我想我可以弄清楚如何使标记大小取决于缩放值，但我不知道如何获得缩放值。

我试图找到一些关于此的文档，但似乎没有。

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

感谢所有帮助

编辑：

所以我制作地图 div：

<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] ."'}]; 
] });
});

使用 cookie 在 html 代码中打印 php 回显。无论我在 php 中回显什么，都与在 html 文件中的脚本中编写它相同。

【问题讨论】：

使用onViewportChange，第二个参数是scaleFactor,这意味着，如果你的初始比例等于1，scaleFactor就是你的缩放比例。但是......我相信在所有地图中标记总是保持相同的大小（讨厌，是吧？）也许考虑设置最小尺寸，否则它们会消失或不可点击。
哦，似乎很难。我想这样做的原因是因为很难单击标记，因为您必须按两次并且标记很小@deblocker
如果您只需要人类手指大小，设置标记的初始大小非常容易......只需查看文档即可。如果您将尝试根据scaleFactor 对标记调整大小进行编码，请创建一个带有简单存根的 Plunker，它会更容易为您提供帮助。
我知道我可以轻松更改标记的 r，但问题是我将拥有如此多的标记，以至于很难看到标记所属的位置当它一样大时作为触摸屏易于使用的东西。去试试看之后调整大小有多难。
现在添加代码@deblocker

标签： javascript jquery html css jvectormap

【解决方案1】：

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

这里是一个示例，说明如何通过直接设置radius 属性来增加jVectorMap 的标准圆形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>

由于您没有在问题中指定如何定义标记以及所需的大小，您可以使用此示例进行调整（但是，我相信这是一个很好的起点）。

【讨论】：

谢谢，真的有效。将对其进行调整，使其在为标记添加大小时会慢一点，但真的很感谢！