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

时间:2015-06-09 00:10:17

标签: google-maps google-maps-api-3

我使用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;
    }
});

2 个答案:

答案 0 :(得分:4)

我认为你需要在这里更新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

这是实现这一目标的一种方法。

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

答案 1 :(得分:2)

您需要设置折线(eiffellouvrePath)的strokeWeight选项。

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

Proof of concept fiddle

&#13;
&#13;
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);
&#13;
html,
body,
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}
&#13;
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>
<div id="info"></div>
&#13;
&#13;
&#13;