Google Maps V3: Durchsetzung von Min. Zoom -Level bei Verwendung von Fitbounds

Question

Ich zeichne eine Reihe von Markierungen auf einer Karte (unter Verwendung von V3 der Maps -API).

In V2 hatte ich den folgenden Code:

  bounds = new GLatLngBounds();

  ... loop thru and put markers on map ...
  bounds.extend(point);
  ... end looping

  map.setCenter(bounds.getCenter());
  var level = map.getBoundsZoomLevel(bounds);
  if ( level == 1 ) 
    level = 5;
  map.setZoom(level > 6 ? 6 : level);

Und das funktioniert gut, um sicherzustellen, dass auf der Karte immer ein angemessenes Detailniveau angezeigt wurde.

Ich versuche, diese Funktionalität in V3 zu duplizieren, aber der Desszoom und die Fitbounds scheinen nicht kooperieren zu sein:

... loop thru and put markers on the map
  var ll = new google.maps.LatLng(p.lat,p.lng);
  bounds.extend(ll);
... end loop

var zoom = map.getZoom();
map.setZoom(zoom > 6 ? 6 : zoom);
map.fitBounds(bounds);

Ich habe eine andere Permutation ausprobiert (z. Vermisse ich etwas? Gibt es eine Möglichkeit, dies zu tun?

Answer 1

Bei Diese Diskussion in Google -Gruppen Ich habe festgestellt, dass der Zoom im Grunde genommen asynchron, wenn Sie einen Fitbounds machen, so dass Sie das Ereignis von Zoom und Grenzen ändern müssen. Der Code im endgültigen Beitrag hat für mich mit einer kleinen Änderung geklappt ... da er nicht mehr als 15 vollständig zoomt, nutzte er die Idee vom vierten Beitrag, um ein Flag einzustellen, um es nur beim ersten Mal zu tun.

// Do other stuff to set up map
var map = new google.maps.Map(mapElement, myOptions);
// This is needed to set the zoom after fitbounds, 
google.maps.event.addListener(map, 'zoom_changed', function() {
    zoomChangeBoundsListener = 
        google.maps.event.addListener(map, 'bounds_changed', function(event) {
            if (this.getZoom() > 15 && this.initialZoom == true) {
                // Change max/min zoom here
                this.setZoom(15);
                this.initialZoom = false;
            }
        google.maps.event.removeListener(zoomChangeBoundsListener);
    });
});
map.initialZoom = true;
map.fitBounds(bounds);

Ich hoffe, das hilft,

Anthony.

Answer 2

Ohne es zu versuchen, würde ich sagen, Sie sollten es einfach tun können, indem Sie es nur tun können fitBounds() Bevor Sie das Zoom -Level erhalten, dh

map.fitBounds(bounds);
var zoom = map.getZoom();
map.setZoom(zoom > 6 ? 6 : zoom);

Wenn Sie das versucht haben und es nicht funktioniert hat, können Sie Ihre Karte mit einer Karte einrichten minZoom in dem MapOptions ^{(API-Referenz)} so was:

var map = new google.maps.Map(document.getElementById("map"), { minZoom: 6 });

Dies würde verhindern, dass die Karte bei der Verwendung weiter nachgeht fitBounds().

Answer 3

Anthonys Lösung ist sehr schön. Ich musste nur den Zoom für die Last der Inital -Seiten reparieren (um sicherzustellen, dass Sie nicht zu weit eingefärbt waren, mit dem Sie zunächst vergrößert waren), und dies hat den Trick für mich getan:

var zoomChangeBoundsListener =
    google.maps.event.addListener(map, 'bounds_changed', function(event) {
        google.maps.event.removeListener(zoomChangeBoundsListener);
        map.setZoom( Math.min( 15, map.getZoom() ) );
    });


map.fitBounds( zoomBounds );

Answer 4

Sie können die Option maxzoom auch kurz vor dem Aufrufen von Fitbounds () festlegen und den Wert danach zurücksetzen:

if(!bounds.isEmpty()) {
    var originalMaxZoom = map.maxZoom;
    map.setOptions({maxZoom: 18});
    map.fitBounds(bounds);
    map.setOptions({maxZoom: originalMaxZoom});
}

Answer 5

Wenn Sie MAP.FitBounds () auf einem Element anrufen - kann die Karte zu genau vergrößern. Um dies zu beheben, fügen Sie MapOptions einfach 'Maxzoom' hinzu ...

var mapOptions = {
  maxZoom: 15
};

Answer 6

In meinem Fall wollte ich einfach das Zoom -Level auf einen weniger festlegen als das, was Google Maps für mich bei Fitbounds ausgewählt hat. Ziel war es, Fitbounds zu verwenden, aber auch sicherzustellen, dass keine Markierungen unter allen Kartenwerkzeugen usw. standen.

Meine Karte wird früh erstellt, und dann haben eine Reihe anderer dynamischer Komponenten der Seite die Möglichkeit, Marker hinzuzufügen und nach jeder Addition Fitbounds aufzurufen.

Dies befindet sich im Anfangsblock, in dem das Kartenobjekt ursprünglich erstellt wurde ...

var mapZoom = null;

Dann wird dies zu jedem Block hinzugefügt, in dem ein Marker hinzugefügt wird, kurz vor der Karte. FitBounds heißt ...

google.maps.event.addListenerOnce(map, 'bounds_changed', function() { 
    if (mapZoom != map.getZoom()) { 
        mapZoom = (map.getZoom() - 1); 
        map.setZoom(mapZoom); 
    } 
});

Bei der Verwendung von 'bounds_changed' ohne die Prüfung zoomte die Karte für jeden Marker einmal heraus, unabhängig davon, ob sie sie benötigte oder nicht. Umgekehrt habe ich, als ich "Zoom_Changed" verwendet habe, manchmal Markierungen unter Karten -Tools, da sich der Zoom nicht tatsächlich geändert hat. Jetzt wird es immer ausgelöst, aber der Scheck stellt sicher, dass er nur einmal und nur bei Bedarf verklemmt wird.

Hoffe das hilft.

Answer 7

Da Google Maps v3 ereignisgesteuert ist, können Sie die API anweisen, den Zoom auf einen richtigen Betrag zu setzen, wenn der Zoom_Changed Ereignisauslöser:

var initial = true
google.maps.event.addListener(map, "zoom_changed", function() {
    if (initial == true){
       if (map.getZoom() > 11) {
         map.setZoom(11);
         initial = false;
       }
    }
}); 

ich benutzte Initial Damit die Karte nicht zu viel zoomen, wenn die eventuellen Fitbounds durchdrungen sind, aber den Benutzer so viel zoomen, wie er/sie will. Ohne die Bedingung wäre ein Zoom -Ereignis über 11 für den Benutzer möglich.

Answer 8

Ich fand Folgendes, um ziemlich gut zu arbeiten. Es ist eine Variante bei Ryan's Antworten zu https: //stackoverflow.com/questions/3334729/.... Es garantiert sich, einen Bereich von mindestens zweifachen Wert von dem Wert von zu zeigen offset in Grad.

const center = bounds.getCenter()
const offset = 0.01
const northEast = new google.maps.LatLng(
    center.lat() + offset,
    center.lng() + offset
)
const southWest = new google.maps.LatLng(
    center.lat() - offset,
    center.lng() - offset
)
const minBounds = new google.maps.LatLngBounds(southWest, northEast)
map.fitBounds(bounds.union(minBounds))