javascript - trabajar - marcar puntos en google maps api

API de Google Maps 3: mostrar/ocultar marcadores según el nivel de zoom

Question

Estoy tratando de mostrar / ocultar algunos marcadores de mapa de Google en función del nivel de zoom. He echado un vistazo aquí para ver las respuestas y, aunque tengo una mejor idea de lo que debo hacer, no he tenido la suerte de poder implementarlo en mi mapa de 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);
}
});

Los marcadores están trazando bien, pero la función de zoom que estoy tratando de hacer no parece funcionar en absoluto, ¿lo estoy haciendo mal?

Answer 1

Debe guardar los marcadores en una matriz e iterar sobre ellos para mostrarlos / ocultarlos en el evento de zoom. Solo estás guardando el último marcador en tu variable de marker . Necesitas una matriz de markers . Además, puede usar el método setVisible del marcador en lugar de usar 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);
}
});