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