Pytanie Google Maps API 3 - Pokaż / ukryj znaczniki w zależności od poziomu powiększenia


Próbuję pokazać / ukryć niektóre znaczniki mapy google w zależności od poziomu powiększenia. Sprawdziłem odpowiedzi i choć mam lepszy pomysł na to, co mam robić, nie miałem szczęścia, mogąc go zaimplementować na mojej mapie 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);
    }
});

Markery są w porządku, ale funkcja zoom, którą próbuję wykonać, nie działa w ogóle - czy robię to źle?


21
2017-11-18 09:31


pochodzenie




Odpowiedzi:


Musisz zapisać znaczniki w tablicy i powtórzyć je, aby pokazać / ukryć je w zdarzeniu powiększania. Zapisujesz tylko ostatni znacznik w swoim marker zmienna. Potrzebujesz markers szyk. Możesz także użyć setVisible metoda markera, a nie użycie 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);
    }
});

28
2017-11-18 09:56



Dziękuję bardzo za to! Zmieniłem go tak, by był wyświetlany, gdy zoom był> = 15 - jedynym problemem jest sytuacja, w której mapa ładuje ikony, dopóki nie powiększysz / pomniejszyć. Na początku chcę je ukryć, a kiedy użytkownik się przybliży, pokażą się. Czy istnieje również sposób wyświetlania niektórych ikon przy różnych powiększeniach? Czy też musiałbym użyć gromadnika znaczników? - user1788364
Możesz użyć klastrowca. Lub jeśli chcesz zrobić to samemu, możesz mieć wiele tablic znaczników i dostosować ich widoczność na podstawie poziomu powiększenia :) Nie wiem, z ilu markerów (i grup znaczników) masz do czynienia, więc trudno powiedzieć która metoda będzie dla ciebie najlepsza. - Taylan Aydinli
Dzięki za szybką odpowiedź :) Mam tylko 4 znaczniki, które chcę pokazać. Idealnie, gdybym był w stanie, chciałbym, aby dwa zostały pokazane, gdy mapa jest pomniejszona, a kiedy mapa jest powiększona, pokaże je wszystkie. Aby mieć dwie tablice, musiałbym mieć dwie lokalizacje var (np. Var locations1, var locations2)? Wydaje się również, że w momencie ładowania znaczników i tylko wtedy, gdy użytkownik zmienia powiększenie, pokazują one / ukrywają. Czy musiałbym użyć funkcji if, aby określić ją od początku, jeśli mają być pokazywane znaczniki? - user1788364
Dodać visible: false własność do twoich znaczników, a Znacznik będzie niewidoczny od pierwszej chwili. Sprawdź MarkerOptions dokumentacja. Zaktualizowałem kod, który opublikowałem, aby dodać visible opcja. - Taylan Aydinli
Dziękuję za całą pomoc - działa tak, jak powinna! - user1788364