API Google Map v3 - définir les limites et le centre


303

Je suis récemment passé à l'API Google Maps V3. Je travaille sur un exemple simple qui trace les marqueurs d'un tableau, mais je ne sais pas comment centrer et zoomer automatiquement par rapport aux marqueurs.

J'ai recherché le net haut et bas, y compris la propre documentation de Google, mais je n'ai pas trouvé de réponse claire. Je sais que je pourrais simplement prendre une moyenne des coordonnées, mais comment régler le zoom en conséquence?

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

Réponses:


423

Oui, vous pouvez déclarer votre nouvel objet limites.

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

Ensuite, pour chaque marqueur, étendez votre objet borné:

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

API: google.maps.LatLngBounds


42
vous pouvez également ajouter ce map.setCenter (bounds.getCenter ());
Raman Ghai

La réponse et le commentaire de Raman ont aidé à réduire ma concentration sur ce dont j'avais besoin.
JustJohn

@ Sam152: vous pourriez être intéressé par une prime de 500 représentants pour une question connexe .
Dan Dascalescu

185

J'ai tout trié - voir les dernières lignes pour le code - ( 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
Merci! Les documents 3.0 sont étonnamment vagues sur la destination de cette fonctionnalité.
Bill

12
Les documents 3.0 sont étonnamment vagues sur la destination de BEAUCOUP de choses. :(
Scott

5
Désolé, c'est au mauvais endroit. Il s'agit d'un commentaire pour la réponse sélectionnée. Mais la fonction d'extension n'a-t-elle pas besoin d'être dans votre boucle for?
kidbrax

1
Bonjour, bon code mais ce code pourrait-il être amélioré pour éviter "aucune image disponible à ce niveau de zoom". parce que ce code ne prend pas en charge le niveau de zoom, bien sûr, il affiche tous les marqueurs, mais personnellement je préférerais voir un zoom plus bas pour éviter les messages "pas d'images ...". Une idée s'il vous plait?
slah

S'agit-il de "bounds.extend (myLatLng); map.fitBounds (bounds);" également disponible pour Android?
lionfly

5

Ma suggestion pour Google Maps api v3 serait (ne pense pas que cela puisse être fait plus efficacement):

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

Dans le résultat, u ajustera tous les points dans les limites de votre fenêtre de carte.

L'exemple fonctionne parfaitement et vous pouvez le vérifier librement ici www.zemelapis.lt


Au lieu de retourner falsesi le boundssont null, vous pourriez maps[ mapId ].getBounds().
kaiser

@localtime en fait, votre site Web a besoin des clés de l'API Google Maps pour fonctionner

1

Les réponses sont parfaites pour ajuster les limites de la carte pour les marqueurs, mais si vous souhaitez étendre les limites de Google Maps pour des formes telles que les polygones et les cercles, vous pouvez utiliser les codes suivants:

Pour les cercles

bounds.union(circle.getBounds());

Pour les polygones

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

Pour les rectangles

bounds.union(overlay.getBounds());

Pour les polylignes

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

La méthode setCenter () s'applique toujours à la dernière version de l'API Maps pour Flash où fitBounds () n'existe pas.


-15

Utilisez ci-dessous un,

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


12
C'est pour Google Maps API v2
dave1010

Vous devez fournir une solution plus réfléchie. Et je pense que c'est pour Google Maps v2.
AllJs
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.