it-swarm.com.de

Verwenden von setZoom () nach der Verwendung von fitBounds () mit Google Maps API V3

Ich verwende fitBounds (), um die Zoomstufe auf meiner Karte festzulegen, einschließlich aller aktuell angezeigten Marker. Wenn ich jedoch nur einen Marker sichtbar habe, beträgt die Zoomstufe 100% (... welche Zoomstufe 20 denke ich ...). Ich möchte jedoch nicht, dass es so weit vergrößert ist, dass der Benutzer die Position des Markers anpassen kann, ohne herauszoomen zu müssen. 

Ich habe folgenden Code:

var marker = this.map.createMarker(view.latlng, this.markerNumber);
this.map.bounds.extend(view.latlng);
this.map.map.setCenter(this.map.bounds.getCenter());
this.map.map.fitBounds(this.map.bounds);
if (this.markerNumber === 1) {
  this.map.map.setZoom(16);
}
this.markerNumber++;

wo this.map.bounds zuvor definiert wurde als:

this.map.bounds = new google.maps.LatLngBounds();

Das Problem, das ich habe, ist jedoch, dass die Zeile this.map.map.setZoom(16); nicht funktioniert, wenn ich this.map.map.fitBounds(this.map.bounds); verwende. Ich weiß jedoch, dass die Codezeile korrekt ist. Wenn ich die fitBound () - Zeile auskommentiere, beginnt das setZoom () magisch zu funktionieren.

Irgendwelche Ideen, wie ich das lösen kann? Ich denke darüber nach, ein MaxZoom-Niveau als Alternative festzulegen, wenn ich das nicht zum Laufen bringen kann.

72

Okay, ich habe es herausgefunden. Anscheinend geschieht das fitbounds () asynchron. Sie müssen also auf ein bounds_changed-Ereignis warten, bevor Sie die Zoomeinstellung einstellen.

map = this.map.map;

map.fitBounds(this.map.bounds);
zoomChangeBoundsListener = 
    google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
        if (this.getZoom()){
            this.setZoom(16);
        }
});
setTimeout(function(){google.maps.event.removeListener(zoomChangeBoundsListener)}, 2000);

Update : Eine bessere Lösung, die kein Timeout erfordert, finden Sie in der Antwort von @ Nequin mit addListenerOnce.

109
Herman Schaaf
google.maps.event.addListenerOnce(yourMap, 'bounds_changed', function(event) {
  if (this.getZoom() > 15) {
    this.setZoom(15);
  }
});

Diese Lösung funktioniert besser ... anstatt auf das Timeout zu warten, um den Listener zu entfernen. Rufen Sie dies direkt vor der Verwendung von fitBounds auf (ich glaube, dass ein Anruf danach auch funktionieren wird).

91
Nequin

Ich fand den zusätzlichen Zoom etwas unruhig. Wenn Sie die Option maxZoom vor dem Aufruf von fitBounds festlegen (und sie dann im Callback aufheben), können Sie dies vermeiden:

map.setOptions({
    maxZoom: 10
});

map.setCenter(new google.maps.LatLng(-89, -179)); // make sure it changes so the idle listener gets called back

map.fitBounds(bounds);

var listener = google.maps.event.addListenerOnce(map, "idle", function()
{
    map.setOptions({
        maxZoom: 999
    });
});
15
Emery Lapinski

Ich habe eine einfache und schmutzige Lösung.
Verwendung Wenn sonst ... 

var marker = this.map.createMarker(view.latlng, this.markerNumber);
this.map.bounds.extend(view.latlng);
this.map.map.setCenter(this.map.bounds.getCenter()); 
if (this.markerNumber === 1) {
  this.map.map.setZoom(16);
} else {
   this.map.map.fitBounds(this.map.bounds);
}       
this.markerNumber++;
2
Vishwanath

Ich habe nur eine Zeile zu der Funktion addBounds(position) hinzugefügt und sie behoben, wie das folgende zeigt:

    addBounds: function(position) {
        this.get('bounds', new google.maps.LatLngBounds()).extend(this._latLng(position));
        this.get('map').fitBounds(this.get('bounds'));
        this.get('map').setZoom(16);//line added
        return this;
    },
1
Mirek Komárek

Ich denke, der richtige Weg ist, dass Sie die Zoomstufe nach map.fitBounds(bounds) einstellen müssen. Fügen Sie einfach map.setZoom(16) nach map.fitBounds(bounds) hinzu. Es funktioniert gut für mich.

0

Alle Lösungen mit Ereignis-Listenern funktionierten nicht für mich (this.getZoom () ist im Callback immer undefiniert und this.setZoom () hat keine Auswirkungen).

Ich habe diese Lösung gefunden, die gut funktioniert hat:

function set_zoom() {
    if(map.getZoom()) {map.setZoom(map.getZoom() - 1);}
    else {setTimeout(set_zoom, 5);}
}
setTimeout(set_zoom, 5);
0
horace