我有一张 map ,当缩放比例大于 5 时,我想更改标记图像。
我知道如何检测缩放变化,但我不知道如何更改图像。
最佳答案
这应该很容易。我查看了您的代码,看起来您没有保留对标记的引用。这是您应该做的第一件事。
因此创建一个 markers
数组:
var markers = [];
在你的 setMarkers()
中函数,将每个新标记插入此数组:
markers.push(marker);
现在您将能够使用 for 循环遍历您的标记:for (i = 0; i < markers.length; i++)
.
理想情况下,我们还应该将每个标记的两个图标存储在标记对象本身中。可以很容易地使用自定义属性来扩充 JavaScript 对象。为此,您可能需要更改您的 setMarkers()
功能如下:
function setMarkers(map, map_bounds, locations, iconLevel1, iconLevel2) {
for (var i = 0; i < locations.length; i++) {
var loc = locations[i];
var myLatLng = new google.maps.LatLng(loc[1], loc[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: iconLevel1, // iconLevel1 by default
title: loc[0],
zIndex: loc[3]
});
// Add custom properties to the marker object
marker.iconLevel1 = iconLevel1;
marker.iconLevel2 = iconLevel2;
// Add the new marker to the markers array
markers.push(marker);
map_bounds.extend(myLatLng);
}
}
最后,您似乎已经在处理 zoom_changed
事件正确。首先,我建议检查 zoomLevel
在 1
之间发生了变化和 2
, 为了不遍历 markers
数组,如果没有必要。如果有变化,只需调用 setIcon()
每个标记的方法,并传递自定义属性 iconLevel1
或 iconLevel2
取决于缩放级别:
var zoomLevel = 1;
google.maps.event.addListener(map, 'zoom_changed', function() {
var i, prevZoomLevel;
prevZoomLevel = zoomLevel;
map.getZoom() < 5 ? zoomLevel = 1 : zoomLevel = 2;
if (prevZoomLevel !== zoomLevel) {
for (i = 0; i < markers.length; i++) {
if (zoomLevel === 2) {
markers[i].setIcon(markers[i].iconLevel2);
}
else {
markers[i].setIcon(markers[i].iconLevel1);
}
}
}
});
上面的应该可行,但您可能希望使用 the subscript notation instead of the dot notation 重构您的 for 循环如下访问标记的属性:
for (i = 0; i < markers.length; i++) {
markers[i].setIcon(markers[i]['iconLevel' + zoomLevel]);
}
关于javascript - 如何在 google map api 中更改缩放更改的标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3192955/