Uzyskanie granicy mapy google v3 po zmianie powiększenia

Question

Próbuję uzyskać granice mapy po zmianie powiększenia, , ale zdarzenie zoom_changed odpala przed ponownie przeliczono granice. Tak więc w procedurze zoom_changed otrzymujesz poprzednie granice, a nie nowe granice.

Czy jest jakiś sposób uzyskania prawidłowych granic przy zmianie zoomu?

Answer 1

Z API documentation:

Jeśli próbuje wykryć zmiany w rzutni, należy użyć specyficznego bounds_changed imprezę zamiast składnika zoom_changed i center_changed wydarzeń. Ponieważ interfejs API Map Google uruchamia te ostatnie zdarzenia niezależnie, funkcja get_bounds() może nie zgłaszać użytecznych wyników do czasu zmiany autorytatywnego widoku. Jeśli chcesz uzyskać get_bounds() po takim wydarzeniu, należy zamiast tego posłuchać zdarzenia bounds_changed.

Answer 2

To jest bug proszę gwiazdę tego problemu, jeśli jesteś zainteresowany.

Jest brzydki obejście go:

google.maps.event.addListener(map, 'zoom_changed', function() { 
    google.maps.event.addListenerOnce(map, 'bounds_changed', function (e) { 
      my_zoom_handler(); // do your job here 
    }); 
}); 

Answer 3

Aby powiązać bounds_changed i pracy z markerami/mapy rzeczy po zoom użyj:

google.maps.event.addListener(map, 'zoom_changed', function() { 
    this.zoomChanged = true; 
}); 

google.maps.event.addListener(map,"bounds_changed",function() { 
    if (this.zoomChanged) { 
     this.zoomChanged = false; 
     // DO YOUR STUFF 
    } 
}); 

Answer 4

miałem ten sam problem. Oto, w końcu udało mi się rozwiązać kilka problemów, które miałem z innymi rozwiązaniami.

* Właściwie wymusza granic niezależnie od tego, czy chcesz korzystać z myszki lub klawiszy strzałek

* nie zatrzymuje się blisko brzegu, jeśli przytrzymać klawisze strzałek, ze względu na przyspieszenie patelni powodując jej „przeregulowanie” THE Krawędź w jednym kroku, więc zamiast tego zatrzymuje się na krótko (spróbuj przytrzymać klawisz strzałki w jednym kierunku, aż uderzysz o krawędź, a następnie zwolnij i naciśnij ponownie, a przy niektórych rozwiązaniach będzie przewijać tylko trochę więcej)

* Nie "odbija się", gdy uderzy w krawędź

* Prawidłowo wymusza ograniczenia w przypadku zmiany powiększenia

EDYCJA: OK, więc działa po zmianie powiększenia za pomocą kółka przewijania, ale nie przy użyciu regulatora zoomu. Pozwól mi trochę się pobawić, a zobaczę, czy mogę sprawić, że to działa ...

EDIT 2: Okazało się, problem polegał na tym, że usunąłem kontrolę panoramy. Dopóki kontrola pan jest obecna, działa to dobrze, zarówno za pomocą pokrętła jak i regulatora zoomu.

EDYCJA 3: Nie ... to nie było to. Zaktualizowałem kod, aby obsłużyć sterowanie powiększeniem.

// bounds of the desired area 
var allowedBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(-64, -64), 
        new google.maps.LatLng(64, 64) 
        ); 

var zoomChanged = false; 

google.maps.event.addListener(map, 'center_changed', function() { 
    var mapBounds = map.getBounds(); 

    if(mapBounds.getNorthEast().lat() > allowedBounds.getNorthEast().lat()) { 
    var newCenter = new google.maps.LatLng(map.getCenter().lat() - 
              (mapBounds.getNorthEast().lat() - 
              allowedBounds.getNorthEast().lat()), 
              map.getCenter().lng(), true); 
    map.panTo(newCenter); 
    return; 
    } 

    if(mapBounds.getNorthEast().lng() > allowedBounds.getNorthEast().lng()) { 
    var newCenter = new google.maps.LatLng(map.getCenter().lat(), 
              map.getCenter().lng() - 
              (mapBounds.getNorthEast().lng() - 
              allowedBounds.getNorthEast().lng()), true); 
    map.panTo(newCenter); 
    return; 
    } 

    if(mapBounds.getSouthWest().lat() < allowedBounds.getSouthWest().lat()) { 
    var newCenter = new google.maps.LatLng(map.getCenter().lat() + 
              (allowedBounds.getSouthWest().lat() - 
              mapBounds.getSouthWest().lat()), 
              map.getCenter().lng(), true); 
    map.panTo(newCenter); 
    return; 
    } 

    if(mapBounds.getSouthWest().lng() < allowedBounds.getSouthWest().lng()) { 
    var newCenter = new google.maps.LatLng(map.getCenter().lat(), 
              map.getCenter().lng() + 
              (allowedBounds.getSouthWest().lng() - 
              mapBounds.getSouthWest().lng()), true); 
    map.panTo(newCenter); 
    return; 
    } 
}, this); 

google.maps.event.addListener(map, 'zoom_changed', function() { 
    zoomChanged = true; 
}, this); 

google.maps.event.addListener(map, 'bounds_changed', function() { 
    if(zoomChanged) { 
    var mapBounds = map.getBounds(); 

    if(mapBounds.getNorthEast().lat() > allowedBounds.getNorthEast().lat()) { 
     var newCenter = new google.maps.LatLng(map.getCenter().lat() - 
              (mapBounds.getNorthEast().lat() - 
              allowedBounds.getNorthEast().lat()), 
              map.getCenter().lng(), true); 
     map.panTo(newCenter); 
     return; 
    } 

    if(mapBounds.getNorthEast().lng() > allowedBounds.getNorthEast().lng()) { 
     var newCenter = new google.maps.LatLng(map.getCenter().lat(), 
              map.getCenter().lng() - 
              (mapBounds.getNorthEast().lng() - 
              allowedBounds.getNorthEast().lng()), true); 
     map.panTo(newCenter); 
     return; 
    } 

    if(mapBounds.getSouthWest().lat() < allowedBounds.getSouthWest().lat()) { 
     var newCenter = new google.maps.LatLng(map.getCenter().lat() + 
              (allowedBounds.getSouthWest().lat() - 
              mapBounds.getSouthWest().lat()), 
              map.getCenter().lng(), true); 
     map.panTo(newCenter); 
     return; 
    } 

    if(mapBounds.getSouthWest().lng() < allowedBounds.getSouthWest().lng()) { 
     var newCenter = new google.maps.LatLng(map.getCenter().lat(), 
              map.getCenter().lng() + 
              (allowedBounds.getSouthWest().lng() - 
              mapBounds.getSouthWest().lng()), true); 
     map.panTo(newCenter); 
     return; 
    } 

    zoomChanged = false; 
    } 
}, this);