如何使标记在 zoom/getting 当前缩放值 JVectorMap 上变大

Question

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

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

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

感谢所有帮助

编辑：

所以我做了地图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] ."'}]; 
] });
});

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

Answer 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>

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

如何使标记在 zoom/getting 当前缩放值 JVectorMap 上变大

How to make the markers get bigger on zoom/getting current zoom value JVectorMap

html

javascript

css

jquery

jvectormap