web-dev-qa-db-fra.com

Méthode Google maps API V3 fitBounds ()

J'ai ce code qui rend une carte.

function initialize() {
    var myOptions = {
      center: new google.maps.LatLng(45.4555729, 9.169236),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP,

panControl: true,
mapTypeControl: false,
panControlOptions: {
            position: google.maps.ControlPosition.RIGHT_CENTER
        },
zoomControl: true,
zoomControlOptions: {
    style: google.maps.ZoomControlStyle.LARGE,
    position: google.maps.ControlPosition.RIGHT_CENTER
},
scaleControl: false,
streetViewControl: false,
streetViewControlOptions: {
    position: google.maps.ControlPosition.RIGHT_CENTER
            }
        };
    var map = new google.maps.Map(document.getElementById("mapCanvas"),
        myOptions);



var Item_1 = new google.maps.LatLng(45.5983128 ,8.9172776);

var myPlace = new google.maps.LatLng(45.4555729, 9.169236);

var marker = new google.maps.Marker({
    position: Item_1, 
    map: map});

var marker = new google.maps.Marker({
    position: myPlace, 
    map: map});

var bounds = new google.maps.LatLngBounds(myPlace, Item_1);
map.fitBounds(bounds);

    }

Même si les deux points sont séparés de 25 km, j'obtiens ce résultat:

enter image description here

Bien que je voudrais rendre un zoom de niveau supérieur.

Comme ça

enter image description here

J'utilise la méthode fitBounds ()

    var bounds = new google.maps.LatLngBounds(myPlace, Item_1);
    map.fitBounds(bounds);

Merci pour votre aide

javascriptgoogle-mapsgoogle-maps-api-3
65
maxdangelo

Ceci est dû au fait que LatLngBounds() ne prend pas deux points arbitraires comme paramètres, mais les points SW et NE

utiliser la méthode .extend() sur un objet borné vide

var bounds = new google.maps.LatLngBounds();
bounds.extend(myPlace);
bounds.extend(Item_1);
map.fitBounds(bounds);

Démo sur http://jsfiddle.net/gaby/22qte/

137
Gabriele Petrioli

LatLngBounds doit être défini avec des points dans l'ordre (sud-ouest, nord-est). Vos points ne sont pas dans cet ordre.

La solution générale, surtout si vous ne savez pas que les points seront certainement dans cet ordre, consiste à étendre les limites vides:

var bounds = new google.maps.LatLngBounds();
bounds.extend(myPlace);
bounds.extend(Item_1);
map.fitBounds(bounds);

L'API va trier les limites.

29
Andrew Leach

J'ai le même problème que vous décrivez bien que je construise mes LatLngBounds comme proposé ci-dessus. Le problème est que les choses sont asynchrones et que vous appelez map.fitBounds() au mauvais moment peut vous laisser un résultat comme dans Q. La meilleure façon que j'ai trouvée est de placer l'appel dans un gestionnaire inactif comme celui-ci:

google.maps.event.addListenerOnce(map, 'idle', function() {
    map.fitBounds(markerBounds);
});
21
vanthome
 var map = new google.maps.Map(document.getElementById("map"),{
                mapTypeId: google.maps.MapTypeId.ROADMAP

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

for (i = 0; i < locations.length; i++){
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
        });
bounds.extend(marker.position);
}
map.fitBounds(bounds);
6
Mourad MAMASSI