Question

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

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

所以我希望有一个聪明的人知道：）

所有帮助表示赞赏

编辑：

所以我制作地图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在php代码中打印php echo。无论我在php中回应什么，都会像在html文件中的脚本中编写它一样。

Answer 1

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

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

＆＃13;

$(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;
        }
      }
    }
  });
});

＆＃13;

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

＆＃13;

由于您没有在问题中指定如何定义标记以及您需要的尺寸，您可以使用此示例进行调整（但我认为这是一个很好的起点）。< / p>

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

1 个答案: