Google Maps API 3-根据缩放级别显示/隐藏标记
Google Maps API 3-根据缩放级别显示/隐藏标记
提问于 2013-11-18 17:31:32
我正在尝试根据缩放级别显示/隐藏一些google地图标记。我已经在这里找到了答案，虽然我对我应该做的事情有了更好的想法，但我还没有幸运地将其实现到我的google地图中。
var infowindow = new google.maps.InfoWindow();
var marker, i;
var locations = [
['<div style="width: 170px;">Title1</div>', 50.794785, -1.116947, image],
['<div style="width: 190px;">Title2</div>', 50.797, -1.109, image],
['<div style="width: 120px;">Title3', 50.796928, -1.107119, '../images/map-pointer.png'],
['<div style="width: 150px;">Title4</div>', 50.794703, -1.117880, '../images/map-pointer.png']
];
/* Get the markers from the array */
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: locations[i][3],
zIndex: 10
});
/* Open marker on mouseover */
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
/* Change markers on zoom */
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoom = map.getZoom();
if (zoom <= 15) {
marker.setMap(null);
} else {
marker.setMap(map);
}
});标记绘制正常，但我正在尝试的缩放功能似乎根本不起作用-我做错了吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-11-18 17:56:30
您需要将标记保存在数组中并迭代它们，以便在缩放事件上显示/隐藏它们。您只将最后一个标记保存在marker变量中。您需要一个markers数组。此外，您可以使用标记的setVisible方法，而不是使用setMap。
var infowindow = new google.maps.InfoWindow();
var marker, i;
var markers = [];
var locations = [
['<div style="width: 170px;">Title1</div>', 50.794785, -1.116947, image],
['<div style="width: 190px;">Title2</div>', 50.797, -1.109, image],
['<div style="width: 120px;">Title3', 50.796928, -1.107119, '../images/map-pointer.png'],
['<div style="width: 150px;">Title4</div>', 50.794703, -1.117880, '../images/map-pointer.png']
];
/* Get the markers from the array */
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
visible: true, // or false. Whatever you need.
icon: locations[i][3],
zIndex: 10
});
/* Open marker on mouseover */
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
markers.push(marker); // save all markers
}
/* Change markers on zoom */
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoom = map.getZoom();
// iterate over markers and call setVisible
for (i = 0; i < locations.length; i++) {
markers[i].setVisible(zoom <= 15);
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20044308
复制相关文章
相似问题