Google Map API v3 — fixer des limites et du centre

J'ai récemment opté pour l'API Google Maps V3. Je suis en train de travailler d'un exemple simple qui les parcelles de marqueurs à partir d'un tableau, mais je ne sais pas comment faire pour centrer et zoomer automatiquement à l'égard des marqueurs.

J'ai cherché sur le net, haute et basse, y compris Google documents propres, mais n'ont pas trouvé de réponse claire. Je sais que je pourrais tout simplement prendre la moyenne des coordonnées, mais comment pourrais-je 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]
});
}
}
InformationsquelleAutor Michael Bradley | 2009-10-12
  1. 406

    Oui, il suffit de déclarer vos nouvelles limites de l'objet.

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

    Ensuite, pour chaque marqueur, étendre vos limites de l'objet:

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

    API: google.cartes.LatLngBounds

    • vous pouvez également ajouter cette carte.setCenter(limites.getCenter());
    • À la fois la réponse et le commentaire par Raman a aidé à réduire de me concentrer sur ce dont j'avais besoin.
    • vous pourriez être intéressé par un 500 rep bounty pour une question connexe.
    InformationsquelleAutor spencercooly
  2. 179

    Ai tout trié - voir les dernières lignes de 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);
}
    • Merci! Le 3.0 documents sont étonnamment vague de savoir où cette fonctionnalité est allé.
    • Le 3.0 documents sont étonnamment vague au sujet de l'endroit où BEAUCOUP de choses se sont. 🙁
    • absolument parfait, merci!
    • Désolé c'est dans le mauvais endroit. Il est destiné à être un commentaire pour la réponse choisie. Mais ne pas l'étendre fonction doit être à l'intérieur de la boucle?
    • Bonjour, grand code, mais ce code pourrait-il être amélioré pour éviter le "pas d'images disponibles à ce niveau de zoom". parce que ce code ne prend pas en compte le niveau de zoom, il ne vous montrera tous les marqueurs, mais personnellement, je préfère le voir plus bas zoom pour éviter le "pas d'images ..." des messages. Aucune idée s'il vous plaît?
    • Sont ces limites.étendre(myLatLng); carte.fitBounds(limites);" disponible pour les appareils Android ainsi?
    • vous pourriez être intéressé par un 500 rep bounty pour une question connexe.

    InformationsquelleAutor Michael Bradley
  3. 5

    Ma suggestion pour l'api google maps v3 serait(ne pense pas que cela peut ê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 s'adapte à tous les points limites dans votre fenêtre de carte.

    Exemple fonctionne parfaitement et u librement pouvez le vérifier ici http://www.zemelapis.lt

    • Au lieu de retourner false si le bounds sont null, vous pourriez maps[ mapId ].getBounds().
    • en fait, votre site web a besoin de l'API Google Maps touches de travail
    InformationsquelleAutor localtime
  4. 1

    Les réponses sont parfaits pour ajuster la carte des limites pour les marques, mais si vous développez Google Maps limites pour les formes comme des polygones et des 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));
    InformationsquelleAutor Hossein
  5. -1

    La setCenter() la méthode est encore applicable pour la dernière version de Maps API for Flash où fitBounds() n'existe pas.

    InformationsquelleAutor Sebastien
  6. -15

    Utilisation ci-après une,

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

    • C'est pour l'API Google Maps v2
    • Vous devez fournir une plus pensé solution. Et je crois que c'est pour Google Maps v2.
    InformationsquelleAutor Khayer