Od połowy 2016 r. Nie ma oficjalnego sposobu ograniczenia widocznego obszaru. Większość rozwiązań ad-hoc ograniczających granice ma jednak wadę, ponieważ nie ograniczają granic dokładnie tak, aby pasowały do widoku mapy, ograniczają je tylko wtedy, gdy środek mapy znajduje się poza określonymi granicami. Jeśli chcesz ograniczyć granice do nakładającego się obrazu, takiego jak ja, może to spowodować zachowanie, jak pokazano poniżej, gdzie mapa podkładania jest widoczna pod naszą nakładką obrazu:
Aby rozwiązać ten problem, utworzyłem bibliotekę , która z powodzeniem ogranicza granice, więc nie można przesuwać się z nakładki.
Jednak podobnie jak inne istniejące rozwiązania ma problem z „wibracjami”. Kiedy użytkownik przesuwa mapę wystarczająco agresywnie, po zwolnieniu lewego przycisku myszy, mapa nadal się przesuwa, stopniowo zwalniając. Zawsze zwracam mapę z powrotem do granic, ale to powoduje wibracje. Tego efektu panoramowania nie można obecnie zatrzymać za pomocą żadnych środków udostępnionych przez interfejs API Js. Wygląda na to, że dopóki Google nie doda obsługi czegoś takiego jak map.stopPanningAnimation (), nie będziemy w stanie stworzyć płynnego doświadczenia.
Przykład korzystania ze wspomnianej biblioteki, najbardziej płynne doświadczenie w zakresie ścisłych ograniczeń, jakie udało mi się uzyskać:
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>
Biblioteka jest również w stanie automatycznie obliczyć minimalne ograniczenie zoomu. Następnie ogranicza poziom powiększenia za pomocąminZoom atrybutu mapy.
Miejmy nadzieję, że pomoże to komuś, kto chce rozwiązania, które w pełni szanuje podane granice i nie chce pozwolić na ich przesuwanie.
if (x < minX) x = minX;iif (x > maxX) x = maxX;nie wykluczajcie się wzajemnie? Dlaczego wyśrodkowujesz płótno na współrzędnych minX / maxX i maxX / maxY, chociaż nie są to współrzędne środka?