web-dev-qa-db-fra.com

API Google Maps 3 - Afficher / masquer les marqueurs en fonction du niveau de zoom

J'essaie d'afficher/masquer certains marqueurs google map en fonction du niveau de zoom. J'ai regardé ici pour les réponses et bien que j'ai une meilleure idée de ce que je suis censé faire, je n'ai pas eu de chance de pouvoir l'implémenter dans ma carte 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);
    }
});

Les marqueurs tracent bien, mais la fonction de zoom que j'essaie de faire ne semble pas fonctionner du tout - est-ce que je me trompe?

javascriptjquerygoogle-mapsgoogle-maps-api-3
23
user1788364

Vous devez enregistrer les marqueurs dans un tableau et les parcourir pour les afficher/masquer sur l'événement de zoom. Vous enregistrez uniquement le dernier marqueur de votre variable marker. Vous avez besoin d'un tableau markers. Vous pouvez également utiliser la méthode setVisible du marqueur plutôt que d'utiliser 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);
    }
});
32
Taylan Aydinli