每次减小圆圈图标比例时,笔划会变得越来越大

Stroke appears bigger and bigger each time circle icon scale is reduced

我创建了一张缩放比例为 4 的新地图:

  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: new google.maps.LatLng(39.9526, -98.5795),
    mapType: 'terrain'
  });

我监听 zoom_changed 事件,以便我可以使用新的比例重新绘制我的标记:

    google.maps.event.addListener(map, 'zoom_changed', function () {
    var zoom = map.getZoom();
    $log.debug("zoom: " + zoom);

我在这里创建我的新图标:

 var greenMarkerIcon = {
    path: google.maps.SymbolPath.CIRCLE,
    fillOpacity: 1,
    fillColor: "green",
      strokeWeight: 1,
    scale: map.getZoom()
  }

当我放大时,一切看起来都很可爱。当我向下钻取时,图标的比例会变大。缩小是问题所在:

Click here for image of icon after reducing scale

圆的边界越来越大。我为 icon.strokeWeight 属性 添加了一条调试语句,它一直保持为 1。我吹走了我所有的旧标记并再次重新绘制它们,所以我不知道为什么单个标记 strokeWeight 看起来更大。

有什么想法吗?

我假设您想在地图缩放时更改标记图标比例,并且标记应 smaller/bigger 而不更改笔划。然后你只需要更改图标比例并将其设置为标记:

google.maps.event.addListener(map, 'zoom_changed', function () {
  var zoom = map.getZoom();
  console.log("zoom: " + zoom);
  greenMarkerIcon.scale = (zoom + 1) * scale; // +1 is for avoiding zoom=0, scale is initial scale of icon
  marker.setIcon(greenMarkerIcon);
});

检查这个例子:http://jsfiddle.net/dUMFW/108/

提供的答案是正确的。

我发现我做错了什么。每次用户单击缩放按钮时,我都会创建一个新标记。标记应仅创建一次,并且应在缩放时更改相关图标。

谢谢。