georreferenciación - google maps javascript api

Google Maps v3: limita el área visible y el nivel de zoom

Question

¿Es posible limitar el mapa de Google v3 a un área determinada? Quiero permitir que se muestre solo un área (por ejemplo, un país) y no permitir que el usuario se desplace en otro lugar. También quiero restringir el nivel de zoom, por ejemplo, solo entre los niveles 6 y 9. Y quiero usar todos los tipos de mapas base.

¿Hay alguna forma de lograr esto?

Tuve un éxito parcial al limitar el nivel de zoom mediante el uso de StyledMap, pero solo tuve éxito al restringir ROADMAP; no pude limitar el zoom en otros tipos básicos de esta manera.

Gracias por cualquier ayuda

Answer 1

Aquí está mi variante para resolver el problema de la limitación del área visible.

 google.maps.event.addListener(this.map, ''idle'', function() {
var minLat = strictBounds.getSouthWest().lat();
var minLon = strictBounds.getSouthWest().lng();
var maxLat = strictBounds.getNorthEast().lat();
var maxLon = strictBounds.getNorthEast().lng();
var cBounds = self.map.getBounds();
var cMinLat = cBounds.getSouthWest().lat();
var cMinLon = cBounds.getSouthWest().lng();
var cMaxLat = cBounds.getNorthEast().lat();
var cMaxLon = cBounds.getNorthEast().lng();
var centerLat = self.map.getCenter().lat();
var centerLon = self.map.getCenter().lng();
if((cMaxLat - cMinLat > maxLat - minLat) || (cMaxLon - cMinLon > maxLon - minLon))
{ //We can''t position the canvas to strict borders with a current zoom level
self.map.setZoomLevel(self.map.getZoomLevel()+1);
return;
}
if(cMinLat < minLat)
var newCenterLat = minLat + ((cMaxLat-cMinLat) / 2);
else if(cMaxLat > maxLat)
var newCenterLat = maxLat - ((cMaxLat-cMinLat) / 2);
else
var newCenterLat = centerLat;
if(cMinLon < minLon)
var newCenterLon = minLon + ((cMaxLon-cMinLon) / 2);
else if(cMaxLon > maxLon)
var newCenterLon = maxLon - ((cMaxLon-cMinLon) / 2);
else
var newCenterLon = centerLon;
if(newCenterLat != centerLat || newCenterLon != centerLon)
self.map.setCenter(new google.maps.LatLng(newCenterLat, newCenterLon));
});

strictBounds es un objeto del new google.maps.LatLngBounds() . self.gmap almacena un objeto Google Map ( new google.maps.Map() ).

Realmente funciona, pero no olvides tener en cuenta las hemorroides con el cruce de los meridianos y paralelos si tus límites los cubren.

Answer 2

Esto puede ser útil.

 var myOptions = {
center: new google.maps.LatLng($lat,$lang),
zoom: 7,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

El nivel de Zoom puede ser personalizable de acuerdo con el requisito.

Answer 3

Esto se puede usar para volver a centrar el mapa en una ubicación específica. Que es lo que necesitaba.

 var MapBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(35.676263, 13.949096),
new google.maps.LatLng(36.204391, 14.89038));
google.maps.event.addListener(GoogleMap, ''dragend'', function ()
{
if (MapBounds.contains(GoogleMap.getCenter()))
{
return;
}
else
{
GoogleMap.setCenter(new google.maps.LatLng(35.920242, 14.428825));
}
});

Answer 4

Mucho mejor manera de limitar el rango ... usado el contiene la lógica del póster anterior.

var dragStartCenter;
google.maps.event.addListener(map, ''dragstart'', function(){
dragStartCenter = map.getCenter();
});
google.maps.event.addListener(this.googleMap, ''dragend'', function(){
if (mapBounds.contains(map.getCenter())) return;
map.setCenter(this.dragStart);
});

Answer 5

Para limitar el zoom en v.3 +. en la configuración del 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 el nivel de zoom de sordo si se requiere una limitación. todos son sensibles a las mayúsculas

function initialize() {
var mapOptions = {
maxZoom:17,
minZoom:15,
zoom:15,
....

Answer 6

Por alguna razón

if (strictBounds.contains(map.getCenter())) return;

no funcionó para mí (tal vez un problema del hemisferio sur). Tuve que cambiarlo a:

 function checkBounds() {
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 > maxX || y < minY || y > maxY) {
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));
}
}

Espero que ayude a alguien.

Answer 7

Una mejor forma de restringir el nivel de zoom podría ser usar las opciones minZoom / maxZoom lugar de reaccionar a los eventos.

var opt = { minZoom: 6, maxZoom: 9 };
map.setOptions(opt);

O las opciones se pueden especificar durante la inicialización del mapa, por ejemplo:

var map = new google.maps.Map(document.getElementById(''map-canvas''), opt);

Ver: Referencia de Google Maps JavaScript API V3

Answer 8

Una solución es como, si conoce el lat / lng específico.

google.maps.event.addListener(map, ''idle'', function() {
map.setCenter(new google.maps.LatLng(latitude, longitude));
map.setZoom(8);
});

Si no tiene lat / lng específico

google.maps.event.addListener(map, ''idle'', function() {
map.setCenter(map.getCenter());
map.setZoom(8);
});

o

google.maps.event.addListener(map, ''idle'', function() {
var bounds = new google.maps.LatLngBounds();
map.setCenter(bounds.getCenter());
map.setZoom(8);
});

Answer 9

A partir de mediados de 2016 , no hay una forma oficial de 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 superposición de imágenes como yo, esto puede dar como resultado un comportamiento como 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 library , que restringe con éxito los límites, por lo que no puede 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 de uso de la biblioteca mencionada, la experiencia de límites estrictos más fluidos 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 utilizando el atributo del mapa minZoom .

Es de esperar que esto ayude a alguien que quiere una solución que respete completamente los límites dados y no quiera dejarlos fuera de su alcance.

Answer 10

Puede escuchar el evento dragend , y si el mapa se arrastra fuera de los límites permitidos, vuelva a moverlo dentro. Puede definir sus límites permitidos en un objeto LatLngBounds y luego usar el método contains() 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 hacia el sur o el lejano este en este caso:

Answer 11

myOptions = {
center: myLatlng,
minZoom: 6,
maxZoom: 9,
styles: customStyles,
mapTypeId: google.maps.MapTypeId.ROADMAP
};