Ab Mitte 2016 gibt es keine offizielle Möglichkeit, den sichtbaren Bereich einzuschränken. Die meisten Ad-hoc-Lösungen zum Einschränken der Grenzen weisen jedoch einen Fehler auf, da sie die Grenzen nicht genau auf die Kartenansicht beschränken, sondern nur einschränken, wenn die Mitte der Karte außerhalb der angegebenen Grenzen liegt. Wenn Sie die Grenzen auf das Überlagern von Bildern wie mich beschränken möchten, kann dies zu einem Verhalten wie unten dargestellt führen, bei dem die Unterlagekarte unter unserer Bildüberlagerung sichtbar ist:
Um dieses Problem zu beheben, habe ich eine Bibliothek erstellt , die die Grenzen erfolgreich einschränkt, damit Sie nicht aus dem Overlay herausschwenken können.
Wie bei anderen vorhandenen Lösungen tritt jedoch ein "vibrierendes" Problem auf. Wenn der Benutzer die Karte aggressiv genug schwenkt, schwenkt die Karte nach dem Loslassen der linken Maustaste von selbst weiter und verlangsamt sich allmählich. Ich bringe die Karte immer wieder an die Grenzen zurück, aber das führt zu Vibrationen. Dieser Panning-Effekt kann derzeit nicht mit den von der Js-API bereitgestellten Mitteln gestoppt werden. Es scheint, dass wir erst dann ein reibungsloses Erlebnis schaffen können, wenn Google Unterstützung für etwas wie map.stopPanningAnimation () hinzufügt.
Beispiel unter Verwendung der erwähnten Bibliothek, die glatteste Erfahrung mit strengen Grenzen, die ich bekommen konnte:
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){
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(62.281819, -150.287132),
new google.maps.LatLng(62.400471, -150.005608));
var image_src = 'https://developers.google.com/maps/documentation/' +
'javascript/examples/full/images/talkeetna.png';
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()">
<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 kann auch die minimale Zoombeschränkung automatisch berechnen. Anschließend wird die Zoomstufe mit eingeschränktminZoom des Kartenattributs eingeschränkt.
Hoffentlich hilft dies jemandem, der eine Lösung sucht, die die vorgegebenen Grenzen vollständig einhält und nicht zulässt, dass sie aus ihnen herausschwenken.
if (x < minX) x = minX;undif (x > maxX) x = maxX;nicht ausschließen? Warum zentrieren Sie die Leinwand auf minX / maxX- und maxX / maxY-Koordinaten, obwohl sie keine Koordinaten der Mitte sind?