API do Google Map v3 - defina limites e centro


303

Recentemente, mudei para a API do Google Maps V3. Estou trabalhando em um exemplo simples que plota marcadores de uma matriz, no entanto, não sei como centralizar e aplicar zoom automaticamente em relação aos marcadores.

Pesquisei na rede alta e baixa, incluindo a documentação do Google, mas não encontrei uma resposta clara. Eu sei que poderia simplesmente fazer uma média das coordenadas, mas como eu definiria o zoom de acordo?

function initialize() {
  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(-33.9, 151.2),


    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

  setMarkers(map, beaches);
}


var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.423036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 121.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.450198, 151.259302, 1]
];

function setMarkers(map, locations) {

  var image = new google.maps.MarkerImage('images/beachflag.png',
      new google.maps.Size(20, 32),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 32));
    var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',

      new google.maps.Size(37, 32),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 32));


      var lat = map.getCenter().lat(); 
      var lng = map.getCenter().lng();      


  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shadow: shadow,
        icon: image,
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
    });
  }
}

Respostas:


423

Sim, você pode declarar seu novo objeto de limites.

 var bounds = new google.maps.LatLngBounds();

Em seguida, para cada marcador, estenda seu objeto de limites:

bounds.extend(myLatLng);
map.fitBounds(bounds);

API: google.maps.LatLngBounds


42
você também pode adicionar este map.setCenter (bounds.getCenter ());
Raman Ghai

Tanto a resposta quanto o comentário de Raman ajudaram a diminuir meu foco no que eu precisava.
amigos estão dizendo sobre joão pessoa


185

Tenho tudo ordenado - veja as últimas linhas do código - ( bounds.extend(myLatLng); map.fitBounds(bounds);)

function initialize() {
  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(0, 0),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(
    document.getElementById("map_canvas"),
    myOptions);
  setMarkers(map, beaches);
}

var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 161.259052, 5],
  ['Cronulla Beach', -36.028249, 153.157507, 3],
  ['Manly Beach', -31.80010128657071, 151.38747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.159302, 1]
];

function setMarkers(map, locations) {
  var image = new google.maps.MarkerImage('images/beachflag.png',
    new google.maps.Size(20, 32),
    new google.maps.Point(0,0),
    new google.maps.Point(0, 32));
  var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
    new google.maps.Size(37, 32),
    new google.maps.Point(0,0),
    new google.maps.Point(0, 32));
  var shape = {
    coord: [1, 1, 1, 20, 18, 20, 18 , 1],
    type: 'poly'
  };
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      shadow: shadow,
      icon: image,
      shape: shape,
      title: beach[0],
      zIndex: beach[3]
    });
    bounds.extend(myLatLng);
  }
  map.fitBounds(bounds);
}

7
Obrigado! Os documentos 3.0 são surpreendentemente vagos sobre onde foi essa funcionalidade.
Bill

12
Os documentos 3.0 são surpreendentemente vagos sobre onde muitas coisas foram. :( #
Scott

5
Desculpe, este local está errado. É para ser um comentário para a resposta selecionada. Mas a função de extensão não precisa estar dentro do seu loop for?
kidbrax

1
Olá, ótimo código, mas esse código poderia ser aprimorado para evitar "nenhuma imagem disponível neste nível de zoom". porque esse código não cuida do nível de zoom, com certeza mostra todos os marcadores, mas, pessoalmente, eu prefiro ver um zoom menor para evitar as mensagens "sem imagens ...". Alguma ideia por favor?
slah

São estes "bounds.extend (myLatLng); map.fitBounds (limites);" disponível para Android também?
lionfly

5

Minha sugestão para o Google Maps api v3 seria (não pense que isso pode ser feito com mais eficiência):

gmap : {
    fitBounds: function(bounds, mapId)
    {
        //incoming: bounds - bounds object/array; mapid - map id if it was initialized in global variable before "var maps = [];"
        if (bounds==null) return false;
        maps[mapId].fitBounds(bounds);
    }
}

No resultado, você ajustará todos os pontos em limites na janela do mapa.

Exemplo funciona perfeitamente e você pode livremente vê-lo aqui www.zemelapis.lt


Em vez de retornar falsese boundsestiver null, você poderia maps[ mapId ].getBounds().
Kaiser

@localtime na verdade, o seu site precisa de chaves API do Google Maps para o trabalho

1

As respostas são perfeitas para ajustar os limites do mapa para marcadores, mas se você deseja expandir os limites do Google Maps para formas como polígonos e círculos, pode usar os seguintes códigos:

For Circles

bounds.union(circle.getBounds());

Para polígonos

polygon.getPaths().forEach(function(path, index)
{
    var points = path.getArray();
    for(var p in points) bounds.extend(points[p]);
});

Para retângulos

bounds.union(overlay.getBounds());

Para Polilinhas

var path = polyline.getPath();

var slat, blat = path.getAt(0).lat();
var slng, blng = path.getAt(0).lng();

for(var i = 1; i < path.getLength(); i++)
{
    var e = path.getAt(i);
    slat = ((slat < e.lat()) ? slat : e.lat());
    blat = ((blat > e.lat()) ? blat : e.lat());
    slng = ((slng < e.lng()) ? slng : e.lng());
    blng = ((blng > e.lng()) ? blng : e.lng());
}

bounds.extend(new google.maps.LatLng(slat, slng));
bounds.extend(new google.maps.LatLng(blat, blng));

-1

O método setCenter () ainda é aplicável à versão mais recente da API do Google Maps para Flash, onde fitBounds () não existe.


-15

Use abaixo de um,

map.setCenter (bounds.getCenter (), map.getBoundsZoomLevel (limites));


12
Isto é para a API do Google Maps v2
dave1010

Você precisa fornecer uma solução mais pensada. E acredito que seja para o Google Maps v2.
AllJs
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.