Google Maps v3 – limite a área visível e o nível de zoom

é possível limitar o Google map v3 a uma determinada área? Quero permitir a exibição de apenas alguma área (por exemplo, um país) e não permitir que o usuário deslize para outro lugar. Também quero restringir o nível de zoom – por exemplo, apenas entre os níveis 6 e 9. E eu quero usar todos os tipos de mapa de base.

Existe alguma maneira de conseguir isso?

Eu tive um sucesso parcial com o limite do nível de zoom usando o StyledMap, mas consegui apenas restringir ROADMAP, não consegui limitar o zoom em outros tipos básicos dessa maneira.

Obrigado por qualquer ajuda

Você pode ouvir o evento dragend e, se o mapa for arrastado para fora dos limites permitidos, mova-o de volta para dentro. Você pode definir seus limites permitidos em um object LatLngBounds e, em seguida, usar o método contains() para verificar se o novo centro de lat / lng está dentro dos limites.

Você também pode limitar o nível de zoom com muita facilidade.

Considere o seguinte exemplo: Demonstração de violino

 < !DOCTYPE html>    Google Maps JavaScript API v3 Example: Limit Panning and Zoom    

Captura de canvas do exemplo acima. O usuário não poderá arrastar mais para o sul ou extremo leste neste caso:

Google Maps JavaScript API v3 Exemplo: forçar o arrastamento de mapa de parada

Melhor maneira de restringir o nível de zoom pode ser usar as opções maxZoom / maxZoom vez de reagir aos events?

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

Ou as opções podem ser especificadas durante a boot do mapa, por exemplo:

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

Consulte: Referência da API JavaScript do Google Maps V3

Para limitar o zoom na v.3 +. na configuração do seu mapa, adicione o nível de zoom padrão e os níveis de zoom minZoom ou maxZoom (ou ambos, se necessário) são de 0 a 19. Você deve declarar o nível de zoom de surdina se a limitação for necessária. todos são sensíveis a maiúsculas!

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

Muito melhor maneira de limitar o intervalo … usou a lógica contém do cartaz acima.

 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); }); 
 myOptions = { center: myLatlng, minZoom: 6, maxZoom: 9, styles: customStyles, mapTypeId: google.maps.MapTypeId.ROADMAP }; 

Isso pode ser usado para recentrar o mapa em um local específico. Qual é o que eu precisava.

  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)); } }); 

Aqui está a minha variante para resolver o problema da limitação da área visível.

  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 é um object do new google.maps.LatLngBounds() tipo new google.maps.LatLngBounds() . self.gmap armazena um object Google Map ( new google.maps.Map() ).

Realmente funciona, mas não se esqueça apenas de levar em conta as hemorróidas que atravessam os meridianos e os paralelos, se seus limites os cobrirem.

Por algum motivo

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

não funcionou para mim (talvez uma questão do hemisfério sul). Eu tive que mudar para:

  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 ajude alguém.

Uma solução é como, se você conhece o lat / lng específico.

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

Se não tiver lat / lng específico

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

ou

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

A partir de meados de 2016 , não há maneira oficial de restringir a área visível. A maioria das soluções ad-hoc para restringir os limites tem uma falha, porque eles não restringem os limites exatamente para se ajustarem à visualização do mapa, eles apenas a restringem se o centro do mapa estiver fora dos limites especificados. Se você quiser restringir os limites à sobreposição de imagens como eu, isso pode resultar em um comportamento como ilustrado abaixo, onde o mapa subjacente é visível sob a sobreposição da imagem:

insira a descrição da imagem aqui

Para resolver esse problema, criei uma biblioteca que restringe os limites com êxito, para que você não possa aproveitar a superposição.

No entanto, como outras soluções existentes, tem um problema de “vibração”. Quando o usuário movimenta o mapa de forma agressiva o suficiente, depois de soltar o botão esquerdo do mouse, o mapa continua a percorrer sozinho, diminuindo gradualmente. Eu sempre devolvo o mapa de volta aos limites, mas isso resulta em um tipo de vibração. Esse efeito de panning não pode ser interrompido com qualquer meio fornecido pela API do Js no momento. Parece que até o google adicionar suporte para algo como map.stopPanningAnimation () não poderemos criar uma experiência tranquila.

Exemplo usando a biblioteca mencionada, a experiência de limites estritos mais suave que consegui:

 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); } 
    

Isso pode ser útil.

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

O nível de zoom pode ser personalizável de acordo com o requisito.