web-dev-qa-db-ja.com

Google Maps API V3メソッドfitBounds（）

地図をレンダリングするこのコードがあります。

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

    }

2つのポイントが25 kmから離れていても、この結果が得られます。

enter image description here

高レベルのズームをレンダリングしたいのですが。

このような

enter image description here

私はメソッドを使用しますfitBounds（）

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

ご協力ありがとうございました

javascriptgoogle-mapsgoogle-maps-api-3
65
maxdangelo

これは、 LatLngBounds() がパラメーターとして2つの任意のポイントをとらないが、SWおよびNEポイントのために発生します

空の境界オブジェクトで.extend()メソッドを使用します

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

http://jsfiddle.net/gaby/22qte/ のデモ

137
Gabriele Petrioli

LatLngBoundsは、ポイントを（南西、北東）の順序で定義する必要があります。あなたのポイントはその順序ではありません。

一般的な修正は、特にポイントが確実にその順序になることを知らない場合、空の境界を拡張することです：

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

APIは境界を整理します。

29
Andrew Leach

上記で提案したようにLatLngBoundsを構築していますが、あなたが説明したのと同じ問題があります。問題は、物事が非同期であり、map.fitBounds()を間違ったタイミングで呼び出すと、Qのような結果が得られる可能性があるということです。

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