A partir de mediados 2016, no hay manera oficial a restringir el área visible. La mayoría de las soluciones ad-hoc para restringir los límites tienen una falla, porque 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 la imagen superpuesta como yo, esto puede dar lugar a un comportamiento como se ilustra a continuación, donde el mapa subyacente es visible bajo nuestra superposición de imágenes:
Para hacer frente a este problema, no tengo creó un library, 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 muestra el mapa con la fuerza suficiente, después de que suelta el botón izquierdo del mouse, el mapa continúa avanzando por su cuenta, desacelerándose gradualmente. Siempre devuelvo el mapa a los límites, pero eso da como resultado un tipo de vibración. Este efecto de panoramización no puede detenerse con ningún medio provisto por la API 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 se ha mencionado, la experiencia más suave estrictos límites pude conseguir:
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){
\t var bounds = new google.maps.LatLngBounds(
\t \t new google.maps.LatLng(62.281819, -150.287132),
\t \t new google.maps.LatLng(62.400471, -150.005608));
\t var image_src = 'https://developers.google.com/maps/documentation/' +
\t \t 'javascript/examples/full/images/talkeetna.png';
\t 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()">
\t <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 es capaz de calcular la restricción mínima de zoom automáticamente. A continuación, restringe el nivel de zoom utilizando el atributo del mapa minZoom.
Esperamos que esto ayude a alguien que quiere una solución que respete completamente los límites dados y no quiera permitir el barrido de ellos.
La decisión no parece clara.¿Por qué 'if (x maxX) x = maxX;' no se excluyen entre sí? ¿Por qué centras el lienzo en las coordenadas minX/maxX y maxX/maxY aunque no son coordenadas del centro? –
En lugar del evento 'dragend', podría usar' draggable: false' en la instancia del mapa ([working example] (http://jsfiddle.net/32pc6f5v/)) – machineaddict
Esta no es una buena técnica para usar el evento "zoom_changed" para restringir al usuario. Debido a que la primera vez siempre va más allá del nivel mínimo y luego usa tu código, estás configurando el zoom min nuevamente, lo cual hará que la pantalla parpadee. –