谷歌地图API 3 - 根据缩放级别显示/隐藏标记

Question

谷歌地图API 3 - 根据缩放级别显示/隐藏标记

javascriptjquerygoogle-mapsgoogle-maps-api-3

30

我试图根据缩放级别显示/隐藏一些谷歌地图标记。我在这里寻找答案，虽然我更清楚应该做什么，但我无法将其实现到我的谷歌地图中。

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

标记已经正常绘制，但我尝试的缩放功能似乎根本不起作用 - 我做错了吗？

- user1788364

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Taylan Aydinli · Accepted Answer

你需要将标记保存在一个数组中，并迭代它们以在缩放事件上显示/隐藏它们。你只在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);
    }
});