Em meados de 2016 , não havia uma maneira oficial de restringir a área visível. A maioria das soluções ad-hoc para restringir os limites tem uma falha, porque não restringem os limites exatamente para caber na visualização do mapa, elas apenas o restringem se o centro do mapa estiver fora dos limites especificados. Se você quiser restringir os limites para imagens de sobreposição como eu, isso pode resultar em um comportamento como o ilustrado abaixo, onde o mapa de subjacência é visível sob nossa sobreposição de imagem:
Para resolver esse problema, criei uma biblioteca , que restringe os limites com sucesso para que você não possa deslocar-se para fora da sobreposição.
No entanto, como outras soluções existentes, ele tem um problema de "vibração". Quando o usuário move o mapa de forma agressiva o suficiente, depois de soltar o botão esquerdo do mouse, o mapa ainda continua a fazer panorâmica por si mesmo, diminuindo gradualmente a velocidade. Eu sempre coloco o mapa de volta nos limites, mas isso resulta em uma espécie de vibração. Este efeito panorâmico não pode ser interrompido por nenhum meio fornecido pela API Js no momento. Parece que até que o Google adicione suporte para algo como map.stopPanningAnimation (), não seremos capazes de criar uma experiência tranquila.
Exemplo usando a biblioteca mencionada, a experiência de limites estritos mais suave que consegui obter:
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>
A biblioteca também é capaz de calcular a restrição mínima de zoom automaticamente. Em seguida, ele restringe o nível de zoom usando minZoomo atributo do mapa.
Esperançosamente, isso ajude alguém que deseja uma solução que respeite totalmente os limites dados e não queira permitir que eles sejam ultrapassados.
if (x < minX) x = minX;eif (x > maxX) x = maxX;não se excluem? Por que você centraliza a tela nas coordenadas minX / maxX e maxX / maxY embora elas não sejam coordenadas de centro?