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:
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>
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.
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?