angularjs google map zoom karte nach max zoom überschritten

Question

Ich möchte die google map zoomen, nachdem sie die maximale Zoomstufe überschritten hat. Ich google es und habe keine Lösung gefunden. Ich baue eine Dach-App, bitte hilf mir dabei.

Answer 1

Die Google Maps API docs zeigen, dass die google.maps.MapOptions Objekt eine Eigenschaft namens hat maxZoom, die Sie beim Erstellen der Karte, um den maximalen Betrag die Karte gezoomt werden kann eingestellt werden.

Sie können minZoom auch auf die gleiche Weise einstellen. Solange Ihre Benutzer nicht in der Lage sein müssen, sehr weit zu zoomen, um sich effektiv bewegen zu können (z. B. wenn Ihre App die Karte irgendwie programmatisch verschiebt), sollten Sie sogar den Wert minZoom auf einen realistischen Wert setzen dass die Leute nicht versehentlich zu weit hinauszoomen, wenn sie versuchen, die Seite nach unten zu scrollen (ich persönlich mache das ständig mit eingebetteten Google Maps und es macht mich verrückt). Aber seien Sie vorsichtig damit: Sie möchten die Benutzererfahrung nicht ruinieren, indem Sie die Fähigkeit Ihrer Benutzer, effizient auf der Karte zu navigieren, beseitigen.

Eine Sache, die Sie beim Lesen der Beschreibung der Parameter maxZoom und minZoom bemerken werden, ist, dass die Dokumente den Bereich der zulässigen Zahlen nicht angeben. Also, wie willst du herausfinden, welche Zahlen weitergegeben werden? Und wie ändert man den maximalen Zoom nach dem Erstellen der Karte?

Wenn das Map Objekt an einem map genannt Variable gebunden ist, dann können Sie den aktuellen Zoom mit map.getZoom() und Sie den aktuellen Zoom mit map.setZoom(zoom) einstellen kann, wo zoom ist Gleitkommazahl, so dass zoom >= 0. (Hinweis: Diese Methoden erhalten und setzen die "Zoom" -Eigenschaft des Objekts Map, aber Änderungen direkt vornehmen auf map.zoom wird nicht verursachen die Karte zu ändern, so sicher sein, die Getter-und Setter-Methoden zu verwenden).

Die meist verkleinerten Ebene für die zoom Eigenschaft ist 0, aber die gezoomten-in-Ebene variiert je tatsächlich auf wo in der Welt ist die Karte konzentriert. (Dies ist sinnvoll, da die Straßenebene an manchen Orten in einigen Fällen eine Meile unter der Erde liegen kann.) Und bei einer Zoomstufe wird Google keine (brauchbaren) Satellitenbilder mehr haben.

Geben Sie MaxZoomService Class ein. Der Konstruktor dieses Objekts kann unter google.maps.MaxZoomService gefunden werden. Die Instanzen dieser Klasse haben nur eine nützliche Methode: getMaxZoomAtLatLng, die eine LatLng Instanz oder eine LatLngLiteral als ersten Parameter und eine Callback-Funktion, um das Ergebnis als seine zweite behandelt.

A LatLng Instanz kann mit dem google.maps.LatLng Konstruktor erstellt werden, und ein LatLngLiteral ist nur ein normaler Objektliteral, die eine lat Eigenschaft und eine lng Eigenschaft hat. Aber da Sie wahrscheinlich ein LatLng Objekt von einer anderen Methode wie map.getCenter() übergeben, sollten Sie sich nicht darum kümmern müssen.

Hier ist ein Beispiel, wie der maximale Zoom in der Satellitenansicht in der Mitte der aktuellen Kartenansicht ermittelt wird.

var mzs = new google.maps.MaxZoomService();  // Create a MaxZoomService instance 
var mapCenterLatLng = map.getCenter();   // Get a LatLng instance 
var handleMaxZoom = function(res) {    // Callback Function accepting MaxZoomResult instance 
    if (res.status === "OK") { 
     // handle success 
     console.log("Max Zoom: " + res.zoom); // Print max possible zoom 
     map.setZoom(res.zoom);     // Set the zoom to the max possible 
    } else { 
     // handle failure 
     console.log("Oops"); 
    } 
}; 
mzs.getMaxZoomAtLatLng(mapCenterLatLng, handleMaxZoom); 
// => Max Zoom: [Number] 

Edit:

Wenn Sie wirklich die maximale Zoomstufe (nicht nur die Standard maximale Zoomstufe wie oben beschrieben), um Ihre einzige wirkliche Option wird zu verwenden CSS-Transformationen überschreiten wollen . Je nachdem, wie kompliziert das Seitenlayout ist, könnte es schwierig werden, perfekt zu werden.

Ich sollte anmerken, dass dies in der Regel nicht eine gute Idee, auch wenn Sie können verwalten das Layout zu erhalten, gut auszusehen und die Bilder nicht verschwommen sein. Es enthält die gleichen Probleme wie die Verwendung von CSS zur Transformation von canvas Elementen (und einige zusätzliche Probleme an der Spitze, weil es nicht so einfach ist, wie nur mit einem einzelnen DOM-Element umzugehen). Ein bemerkenswertes Problem besteht darin, dass das Anwenden von CSS-Transformationen sich nicht auf die internen Koordinaten der Karte auswirkt (wie die in Klickereignissen enthaltenen), so dass Sie diese jedes Mal transformieren müssen, wenn Sie sie verwenden möchten. Da das primäre Karten-Div (das von map.getDiv() zurückgegeben wird) in einem Container sitzen muss, führt diese Methode darüber hinaus oft dazu, dass es seinen Container überläuft, und Sie müssen mit dieser zusätzlichen Komplexität umgehen.

Wenn Sie es noch tun wollen, dann sind hier einige Teile des Puzzles, die helfen können:

var mapCanvas = map.getDiv();   // The "main" div element that contains the map 
var container = mapCanvas.parentElement; // You'll need some sort of container here 
var scalingFactor = 1.5;     // => Set a scaling factor (ex: 1.5 means scale it to 150% normal size) 
/* Use CSS zoom property and/or vendor transforms to scale the map (though you could do this in straight CSS instead) */ 
mapCanvas.style.zoom = scalingFactor; 
mapCanvas.style.MozTransform = 'scale(' + scalingFactor + ')'; 
mapCanvas.style.WebkitTransform = 'scale(' + scalingfactor + ')'; 
/* Then try to fit the scaled map back into its container, which will depend on how you're displaying it */ 
mapCanvas.style.width = "calc(100%/" + scalingFactor + ")"; // The CSS 'calc()' method might be useful here