Puede escuchar el dragendevento y, si el mapa se arrastra fuera de los límites permitidos, vuelva a moverlo hacia adentro. Puede definir sus límites permitidos en un LatLngBoundsobjeto y luego usar el contains()método para verificar si el nuevo centro lat / lng está dentro de los límites.
También puede limitar el nivel de zoom muy fácilmente.
Considere el siguiente ejemplo: Fiddle Demo
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Limit Panning and Zoom</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="map" style="width: 400px; height: 300px;"></div>
<script type="text/javascript">
// This is the minimum zoom level that we'll allow
var minZoomLevel = 5;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: minZoomLevel,
center: new google.maps.LatLng(38.50, -90.50),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Bounds for North America
var strictBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(28.70, -127.50),
new google.maps.LatLng(48.85, -55.90)
);
// 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));
});
// Limit the zoom level
google.maps.event.addListener(map, 'zoom_changed', function() {
if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
});
</script>
</body>
</html>
Captura de pantalla del ejemplo anterior. El usuario no podrá arrastrar más al sur o al este en este caso:
if (x < minX) x = minX;yif (x > maxX) x = maxX;no excluirse? ¿Por qué centra el lienzo en las coordenadas minX / maxX y maxX / maxY aunque no son coordenadas del centro?dragendevento que podría usardraggable: falseen la instancia del mapa ( ejemplo de trabajo )center_changedevento en lugar dedragend.¿Una mejor manera de restringir el nivel de zoom podría ser usar las opciones
minZoom/ enmaxZoomlugar de reaccionar a los eventos?O las opciones se pueden especificar durante la inicialización del mapa, por ejemplo:
Consulte: Referencia de la versión 3 de la API de JavaScript de Google Maps
fuente
Buenas noticias. A partir de la versión 3.35 de la API de JavaScript de Maps, que se lanzó el 14 de febrero de 2019, puede usar una nueva
restrictionopción para limitar la ventana gráfica del mapa.Según la documentación
fuente: https://developers.google.com/maps/documentation/javascript/reference/map#MapRestriction
Entonces, ahora solo agrega la opción de restricción durante la inicialización de un mapa y eso. Eche un vistazo al siguiente ejemplo que limita la ventana gráfica a Suiza
¡Espero que esto ayude!
fuente
Para limitar el zoom en v.3 +. en la configuración de su mapa agregue el nivel de zoom predeterminado y los niveles de zoom minZoom o maxZoom (o ambos si es necesario) son de 0 a 19. Debe declarar un nivel de zoom sordo si se requiere limitación. ¡todos distinguen entre mayúsculas y minúsculas!
fuente
Una forma mucho mejor de limitar el rango ... usó la lógica de contenido del póster de arriba.
fuente
this.googleMaplugar demappara el segundo oyente? ¿No deberíadragStartserlo tambiéndragStartCenter? Por último, ¿qué esmapBounds?Esto se puede utilizar para volver a centrar el mapa en una ubicación específica. Que es lo que necesitaba.
fuente
fuente
Aquí está mi variante para resolver el problema de la limitación del área visible.
strictBoundses un objeto denew google.maps.LatLngBounds()tipo.self.gmapalmacena un objeto de Google Map (new google.maps.Map()).Realmente funciona, pero no solo olvide tener en cuenta las hemorroides con cruce de meridianos 0 y paralelos si sus límites los cubren.
fuente
Por alguna razón
no funcionó para mí (tal vez un problema del hemisferio sur). Tuve que cambiarlo a:
Espero que ayude a alguien.
fuente
Una solución es como, si conoce el lat / lng específico.
Si no tiene lat / lng específico
o
fuente
A mediados de 2016 , no existe una forma oficial de restringir el área visible. Sin embargo, la mayoría de las soluciones ad-hoc para restringir los límites tienen un defecto, ya que no restringen los límites exactamente para ajustarse a la vista del mapa, solo lo restringen si el centro del mapa está fuera de los límites especificados. Si desea restringir los límites a una imagen superpuesta como yo, esto puede resultar en un comportamiento como el que se ilustra a continuación, donde el mapa subyacente es visible debajo de nuestra superposición de imágenes:
Para abordar este problema, he creado una biblioteca , que restringe con éxito los límites para que no pueda salir de la superposición.
Sin embargo, como otras soluciones existentes, tiene un problema de "vibración". Cuando el usuario desplaza el mapa de forma suficientemente agresiva, después de soltar el botón izquierdo del ratón, el mapa sigue desplazándose por sí mismo, ralentizándose gradualmente. Siempre devuelvo el mapa a los límites, pero eso resulta en una especie de vibración. Este efecto de panorámica no se puede detener con ningún medio proporcionado por la API de Js en este momento. Parece que hasta que Google agregue soporte para algo como map.stopPanningAnimation () no podremos crear una experiencia fluida.
Ejemplo usando la biblioteca mencionada, la experiencia de límites estrictos más suave que pude obtener:
La biblioteca también puede calcular la restricción mínima de zoom automáticamente. Luego restringe el nivel de zoom usando
minZoomel atributo del mapa.Con suerte, esto ayudará a alguien que quiera una solución que respete plenamente los límites establecidos y no quiera permitir que se salga de ellos.
fuente
Esto puede resultar útil.
El nivel de Zoom se puede personalizar según los requisitos.
fuente
e.g. only between levels 6 and 9, establece el nivel de zoom predeterminado y elimina la interfaz de usuario predeterminada (es decir,+/-) que es un poco exagerada.