Google Maps API v3 - 更改不同缩放级别的折线的 strokeWeight答案

【问题标题】：Google Maps API v3 - change strokeWeight of polylines for different zoom levelsGoogle Maps API v3 - 更改不同缩放级别的折线的 strokeWeight
【发布时间】：2015-06-09 00:10:17
【问题描述】：

我已经使用 Google Maps API v3 在众多地图上创建表示路径的折线。每张地图上有多条折线。缩小时，我希望折线的 strokeWeight 更轻，但放大时更重。我尝试添加缩放更改侦听器并让它更改 strokeWeight 的变量值，但它似乎不起作用。我需要谷歌以某种方式重做 google.maps.Polyline({...})。另外，我需要在全局范围内执行此操作，正如我所说，我在每张地图上都有许多折线。

我确实对此进行了研究，因为它一定是一个常见问题，但我没有找到关于这个主题的任何内容。

有没有人有办法解决这个问题？

var polyWidth = 8;
var eiffellouvrePath = new google.maps.Polyline({
    path: eiffellouvre,
    strokeColor: '#aa0022',
    strokeOpacity: .8,
    strokeWeight: polyWidth
});

eiffellouvrePath.setMap(map);
/************************************************/
google.maps.event.addListener(map, 'zoom_changed', function() {
    var zoom = map.getZoom();
    if (zoom <= 10) {
        polyWidth = 3;
    } else {
        polyWidth = 8;
    }
});

【问题讨论】：

标签： google-maps google-maps-api-3

【解决方案1】：

我认为您需要在此处实际更新Polyline 的宽度，所以：

google.maps.event.addListener(map, 'zoom_changed', function() {
  var zoom = map.getZoom();
  if (zoom <= 10) {
    eifellouvrePath.setOptions({strokeWeight: 3});
  } else {
    eifellouvrePath.setOptions({strokeWeight: 8});
  }
});

如果您需要在全局范围内执行此操作，我建议您存储您的折线并遍历每条折线以更新其strokeWeight。

编辑

您提到要创建此笔划宽度更改并将其应用到多个Polylines。

这是一种方法。

var paths = [];
// Fill paths with the Arrays of LatLngs describing the Polyline path.

var polylines = [];
for (var i = 0; paths[i]; ++i) {
  // Create a new function scope.
  function(i) {
    var poly;
    poly = polylines[i] = new google.maps.Polyline({
      path: paths[i],
      strokeColor: '#aa0022',
      strokeOpacity: .8,
      strokeWeight: (map.getZoom() <= 10) ? 3 : 8
    });
    poly.setMap(map);

    google.maps.event.addListener(map, 'zoom_changed', function() {
      var zoom = map.getZoom();
      if (zoom <= 10) {
        poly.setOptions({strokeWeight: 3});
      } else {
        poly.setOptions({strokeWeight: 8});
      }
    });
  }(i);
}

【讨论】：

我尝试了您的方法，但没有成功。是的，我注意到您回复中路径的拼写更改并在我的代码中修复了该问题 - 仍然无法正常工作。
太棒了！这次我让它工作了。我之前可能遇到过一些语法故障。现在我需要考虑如何将它应用于已经创建的数百条折线......我需要考虑一下，以便它为每个文件加载。谢谢。
我已经尝试在末尾添加一个额外的代码 sn-p 来解释多段线。让我知道这是否有帮助:)
仅供参考，function(i) 部分给出了一个 javascript 错误，并且在放大/缩小时，只有最后一个 poly 更改了 strokeWeight，而不是全部。看起来事件监听器只监听最后一个多边形，尽管它在 for 循环中被调用。

【解决方案2】：

您需要设置折线的strokeWeight选项（eiffellouvrePath）。

polyWidth = 3;
eiffellouvrePath.setOptions({
  strokeWeight: polyWidth
});

Proof of concept fiddle,

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var eiffellouvre = [new google.maps.LatLng(37.4419, -122.1419),
    new google.maps.LatLng(37.4419, -122.2)
  ]
  var polyWidth = 8;
  var eiffellouvrePath = new google.maps.Polyline({
    path: eiffellouvre,
    strokeColor: '#aa0022',
    strokeOpacity: .8,
    strokeWeight: polyWidth
  });

  eiffellouvrePath.setMap(map);

  google.maps.event.addListener(map, 'zoom_changed', function() {
    var zoom = map.getZoom();
    if (zoom <= 10) {
      polyWidth = 3;
      eiffellouvrePath.setOptions({
        strokeWeight: polyWidth
      });
    } else {
      polyWidth = 8;
      eiffellouvrePath.setOptions({
        strokeWeight: polyWidth
      });
    }
    document.getElementById('info').innerHTML = polyWidth;
  });


}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>
<div id="info"></div>

【讨论】：