Donnerstag, Juni 4, 2020

Holen Sie sich Grenzen einer google-map-v3 nach zoom ändern

Ich versuche, die Grenzen der map nach zoom verändert hat,
aber die zoom_changed event feuert vor die Grenzen neu berechnet worden. So in der zoom_changed handler erhalten Sie die früheren Grenzen, nicht die neuen Grenzen.

Gibt es eine Möglichkeit, wie man die richtigen Grenzen auf zoom ändern?

InformationsquelleAutor | 2009-06-16

4 Kommentare

  1. 17

    Dies ist ein bug bitte star dieses Problem, wenn Sie interessiert sind.

    Es ist ein hässlicher workaround für Sie:

    google.maps.event.addListener(map, 'zoom_changed', function () {
        google.maps.event.addListenerOnce(map, 'bounds_changed', function (e) {
                my_zoom_handler(); //do your job here
        });
    });
    • +1 ich Stimme, dass dies ein bug ist und die API ist nicht intuitiv für diesen Fall. Wäre schön, wenn die zoom_change wurde gesendet, sobald die neuen Grenzen berechnet wurden.
    • Dieser code wird nicht funktionieren, wenn bounds_changed Ereignis eintrifft, bevor das zoom-Ereignis. Maps API fires these latter events independently.
    • Große Abhilfe. Ich habe die innere Ereignis-listener, um 'idle' statt 'bounds_changed' als 'bounds_changed' Ereignis wird ausgelöst, während der animation. Ich denke, der OP wollte es ausgelöst, nachdem.
    • Tolle Arbeit !!!! Sie retten meinen Tag ….
    • Super, vielen Dank, ersparte mir viel google und Suche nach einer Lösung, mit timeout, und andere Dinge, ist dies die beste;
    • ein Problem, das drag-event wird auch beeinflusst werden durch die änderungen gebunden;

  2. 3

    Aus der API-Dokumentation:

    Wenn Sie versuchen, zu erkennen, dass eine änderung in den Arbeitsbereich, werden Sie sicher, dass die spezifischen bounds_changed Veranstaltung eher als Bestandteil zoom_changed und center_changed Veranstaltungen. Da die Maps-API feuert diese letzteren Ereignisse unabhängig, get_bounds() kann nicht gemeldet brauchbare Ergebnisse erst nach der viewport ist maßgeblich geändert. Wenn Sie möchten, get_bounds() nach einem solchen Ereignis sicher sein zu hören bounds_changed Veranstaltung statt.

    • mit bounds_changed Veranstaltung statt zoom_changed in diesem Fall Unsinn ist. Es wird Feuer bei jeder Gelegenheit, wenn die Grenzen verändert werden, aber er ist nur daran interessiert, in Fällen, wenn der zoom geändert wird.
    • Ich bin nicht einverstanden, dass der Umgang mit der bounds_changed Ereignis ist ‚Unsinn‘. Wenn Sie nach den Grenzen, wenn der zoom geändert wird, kann man nicht überprüfen getZoom in Ihrem bounds_change handler? Die Unterlagen, die ich gepostet begründet das Verhalten (edge-Fall-bug), aber der workaround scheint ziemlich einfach zu mir.
    • natürlich können Sie, aber für die Sache, die OP will, Handhabung bounds_changed Veranstaltung statt zoom_changed ist unnecesary overkill, weil das Ereignis Feuer sogar während panning etc. Betrachten Sie die Problemumgehung in meiner Antwort.
    • Yep, ich hab dein workaround und es hat mein upvote.
  3. 2

    Binden bounds_changed und die Arbeit mit Marker/Karte Zeug nach dem Zoomen verwenden:

    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
        }
    });
  4. 0

    Hatte ich das gleiche Problem. Hier ist, was ich habe endlich zu arbeiten, um zu lösen, einige der Probleme, die ich hatte, mit anderen Lösungen.

    *Richtig erzwingt Grenzen unabhängig davon, ob Sie die Maus oder die Pfeiltasten

    *Nicht, halt den Rand, wenn halten Sie die Pfeil-Tasten, durch die pan-Beschleunigung, die es verursacht, um ein „überschießen“ der Rand in einem einzelnen Schritt, so hält er kurz an, anstatt (versuchen Sie, halten Sie die Pfeiltaste in eine Richtung, bis Sie auf die Kante, dann loslassen und drücken Sie Sie erneut, und mit einigen Lösungen, es scrollt nur ein wenig mehr)

    *Nicht „bounce back“, wenn es Sie trifft die Kante

    *Richtig erzwingt Grenzen auf zoom ändern

    EDIT: Ok, also es funktioniert, wenn Sie ändern, Zoomen mit dem Mausrad, aber nicht mit der zoom-Steuerung. Lassen Sie mich spielen, um mit ihm ein wenig, und ich werde sehen, ob ich bekommen kann, dass die Arbeit zu…

    EDIT 2: Stellt sich heraus, das Problem war, weil ich entfernt mit dem pan-regler. So lange wie die pan-regler vorhanden ist, dies funktioniert sehr gut, sowohl mit dem scroll-Rad und die zoom-Steuerung.

    EDIT 3: Nee… das war es nicht. Ich habe aktualisiert, der code für die zoom-Steuerung.

    //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);
    
    • Mit diesem Ansatz bekomme ich „too much recursion“ – Fehler. Wenn ich stattdessen einfach nur Zuhören, die bounds_changed Ereignis (ignorieren center_changed und zoom_changed), dieser Fehler verschwindet. Auf der anderen Seite, die Bewegungen sind nicht 100% perfekt, denn es gibt noch einige bounce.
    • es scheint eine spezifische Frage zu Google Chrome, versuchen Sie es in Firefox. Ich bin auf der Suche in Sie weiter, um zu sehen, ob ich die richtige Frage. Siehe diese Frage: stackoverflow.com/questions/15671480/…
    • Ich löste das Problem durch die Einstellung v=3 in der Abfrage-string für API-Skript, include-Zeile. also <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>

Kostenlose Online-Tests