Ab Mitte 2016, gibt es keinen offiziellen Weg sichtbaren Bereich zu beschränken. Die meisten Ad-hoc-Lösungen zur Einschränkung der Grenzen haben jedoch einen Fehler, da sie die Grenzen nicht genau auf die Kartenansicht beschränken, sondern sie nur einschränken, wenn die Mitte der Karte außerhalb der angegebenen Grenzen liegt. Wenn Sie die Grenzen zu überlagern Bild wie mir beschränken wollen, kann dies in einem Verhalten führen, wie unten dargestellt, wobei die darunter liegende Karte unter unserer Bildüberlagerung sichtbar ist:
Um dieses Problem zu bewältigen, ich habe Es wurde ein library erstellt, der die Grenzen erfolgreich einschränkt, sodass Sie das Overlay nicht verschieben können.
Wie andere bestehende Lösungen hat es jedoch ein "vibrierendes" Problem. Wenn der Benutzer die Karte aggressiv schwenkt, nachdem er die linke Maustaste losgelassen hat, wird die Karte weiterhin selbst geschwenkt und verlangsamt sich allmählich. Ich gebe die Karte immer zurück an die Grenzen, aber das führt zu einer Art Vibration. Dieser Panning-Effekt kann derzeit nicht mit irgendwelchen Mitteln gestoppt werden, die von der Js-API bereitgestellt werden. Es scheint, dass bis Google Unterstützung für etwas wie map.stopPanningAnimation() hinzufügen wird, können wir keine glatte Erfahrung erstellen.
Beispiel der erwähnten Bibliothek, die glatteste strenge Grenzen Erfahrung konnte ich bekommen mit: die minimale Zoom Einschränkung
function initialise(){
var myOptions = {
zoom: 5,
center: new google.maps.LatLng(0,0),
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
var map = new google.maps.Map(document.getElementById('map'), myOptions);
addStrictBoundsImage(map);
}
function addStrictBoundsImage(map){
\t var bounds = new google.maps.LatLngBounds(
\t \t new google.maps.LatLng(62.281819, -150.287132),
\t \t new google.maps.LatLng(62.400471, -150.005608));
\t var image_src = 'https://developers.google.com/maps/documentation/' +
\t \t 'javascript/examples/full/images/talkeetna.png';
\t var strict_bounds_image = new StrictBoundsImage(bounds, image_src, map);
}
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("maps", "3",{other_params:"sensor=false"});
</script>
<body style="margin:0px; padding:0px;" onload="initialise()">
\t <div id="map" style="height:400px; width:500px;"></div>
<script type="text/javascript"src="https://raw.githubusercontent.com/matej-pavla/StrictBoundsImage/master/StrictBoundsImage.js"></script>
</body>
Die Bibliothek ist auch in der Lage automatisch zu berechnen. Dann wird die Zoomstufe unter Verwendung des Kartenattributs minZoom eingeschränkt.
Hoffentlich hilft dies jemandem, der eine Lösung wünscht, die die gegebenen Grenzen vollständig respektiert und nicht zulassen will, dass sie aus ihnen herauswachsen.
Die Entscheidung sieht nicht sauber aus.Warum 'if (x maxX) x = maxX;' schließt sich nicht aus? Warum zentrierst du die Leinwand auf MinX/MaxX- und MaxX/MaxY-Koordinaten, obwohl sie keine Koordinaten der Mitte sind? –
Anstelle von 'dragend' können Sie' draggable: false' auf der Karteninstanz verwenden ([funktionierendes Beispiel] (http://jsfiddle.net/32pc6f5v/)) – machineaddict
Dies ist keine gute Methode, um das "zoom_changed" -Ereignis zu verwenden Beschränke den Benutzer. Weil es das erste Mal immer über die Min-Ebene hinausgeht und Sie dann Ihren Code verwenden, stellen Sie den Min-Zoom erneut ein, der den Bildschirm flirren wird. –