Setzen Sie die Grenzen gleich OverlayImage google maps

Question

ich versuche, die Grenzen zu setzen, so dass Sie nicht weg von den OverlayImages Grenzen schwenken können. Aber obwohl ich hier viele Threads gefunden habe, kann ich es nicht funktionieren lassen, was mache ich falsch?

var map = new google.maps.Map(document.getElementById('map'), { 
    center: {lat: 40.740, lng: -74.18}, 
    zoom : 15, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

var imageBounds = { 
    north: 40.773941, 
    south: 40.712216, 
    east: -74.12544, 
    west: -74.22655 
}; 
historicalOverlay = new google.maps.GroundOverlay(
'http://i.stack.imgur.com/0mgx2.jpg', 
imageBounds); 
historicalOverlay.setMap(map); 


var strictBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(40.773941, -74.12544), 
    new google.maps.LatLng(40.712216, -74.22655) 
); 

// Listen for the dragend event 
google.maps.event.addListener(map, 'dragend', function() { 
    if (strictBounds.contains(map.getCenter())) return; 

    // We're out of bounds - Move the map back within the bounds 

    var c = map.getCenter(), 
     x = c.lng(), 
     y = c.lat(), 
     maxX = strictBounds.getNorthEast().lng(), 
     maxY = strictBounds.getNorthEast().lat(), 
     minX = strictBounds.getSouthWest().lng(), 
     minY = strictBounds.getSouthWest().lat(); 

    if (x < minX) x = minX; 
    if (x > maxX) x = maxX; 
    if (y < minY) y = minY; 
    if (y > maxY) y = maxY; 

    map.setCenter(new google.maps.LatLng(y, x)); 
}); 

Answer 1

Sie haben Parameter für google.maps.LatLngBounds verwechselt. Die erste ist die Süd-West-Ecke und die zweite ist die Nord-Ost-Ecke. Versuchen Sie stattdessen Ihre strictBounds:

var strictBounds = new google.maps.LatLngBounds( 
    new google.maps.LatLng(imageBounds.south, imageBounds.west), 
    new google.maps.LatLng(imageBounds.north, imageBounds.east) 
); 

Wenn Sie auch zu viel aus dem Bereich Zoomen nicht zulassen wollen, oder in zu viel zoomen, können Sie minZoom und maxZoom Parameter verwenden, wenn eine Karte erstellen, wie folgt aus:

var map = new google.maps.Map(document.getElementById('map'), { 
    center: {lat: 40.740, lng: -74.18}, 
    zoom : 15, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    minZoom: 12, 
    maxZoom: 14 
}); 

auch empfehle ich bounds_changed statt dragend mit, meiner Meinung nach ist es viel glattere Erfahrung für den Benutzer bereitstellt. Sie hätten also:

google.maps.event.addListener(map, 'bounds_changed', function() { ... 

Eine letzte Sache. Der Algorithmus, den Sie nur verwenden, stellt sicher, dass das CENTER der Karte nicht aus dem strictBounds verschoben wird. So kann der Benutzer einen Teil der zugrunde liegenden Karte sehen, wenn er um die Seiten des Bildes herum schwenkt. Mit diesem Algorithmus werden Sie keine besseren Ergebnisse erzielen (ich kenne derzeit keine bessere Lösung).