Google Maps API v3 - 针对不同的缩放级别更改多段线的strokeWeight [英] Google Maps API v3 - change strokeWeight of polylines for different zoom levels

问题描述

我已经使用Google Maps API v3创建多条代表多条地图上的路线的多段线。每个地图上有多条多段线。缩小时，我希望多段线具有较轻的strokeWeight，但放大时较重。我尝试添加一个缩放更改监听器，并让它为strokeWeight更改一个变量值，但似乎不起作用。我需要Google以某种方式重做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; 
} 
}）; 
  

解决方案

我认为您需要实际更新 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 。

编辑

你已经提到过你想创建这个笔画宽度变化并将其应用到多个 Polyline s。

这是一种方法。

  var paths = []; 
 //用LatLng的Arrays描述Polyline路径填充路径。 
 
 var polylines = []; 
 for（var i = 0; paths [i]; ++ i）{
 //创建一个新的函数作用域。 
函数（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）; 
} 
  

I have use Google Maps API v3 to create polylines representing trails on numerous maps. There are multiple polylines on each map. When zoomed out I would like the polylines to have a lighter strokeWeight, but heavier when zoomed in. I tried adding a zoom change listener and have it change a variable value for the strokeWeight, but it doesn't appear to work. I need Google to somehow redo the google.maps.Polyline({...}). Also, I need to do this globally, as I said, I have many polylines on each map.

I did do research on this, as it must be a common issue, but I didn't find anything on this topic.

Does anyone have an approach for this?

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

解决方案

I think you need to actually update the Polyline's width here, so:

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

If you need to do this globally, I would suggest storing your polylines and running through each one to update its strokeWeight.

EDIT

You've mentioned you want to create and apply this stroke width change to multiple Polylines.

Here's one way to do that.

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

这篇关于Google Maps API v3 - 针对不同的缩放级别更改多段线的strokeWeight的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！