web-dev-qa-db-ja.com

Googleマップのすべてのマーカーに対応するようにズームを自動的に調整します

Googleマップの最新バージョンを使用します。経度と緯度を使用してマーカーを追加し、JavaScriptを使用してすべてのマーカーが含まれるようにマップのズームレベルを自動的に調整する方法

javascriptgoogle-mapsgoogle-maps-api-3google-maps-markers
40
TrustyCoder

Google Maps API v3は、複数のLatLngBoundsオブジェクトを追加できるLatLngオブジェクトを提供します。次に、これを Map.fitBounds() functionに渡すことができます。ここで説明します。

部分的な例

var latlng = [
    new google.maps.LatLng(1.23, 4.56),
    new google.maps.LatLng(7.89, 1.01),
    // ...
]; 
var latlngbounds = new google.maps.LatLngBounds();
for (var i = 0; i < latlng.length; i++) {
    latlngbounds.extend(latlng[i]);
}
map.fitBounds(latlngbounds);
79
Salman A

緯度/経度のペアごとに marker オブジェクトをインスタンス化して、Googleマップにマーカーを追加します。

var marker = new google.maps.Marker({
    position: currentLatLng, 
    map: map,
    title:"Title!"
});

マーカーコンストラクターの map オプションは、新しいマーケットオブジェクトをマップに関連付けます。

マップをズームして新しいマーカーを含めるには、 map オブジェクトでfitBoundsメソッドを使用します。 fitBoundsは、パラメーターとして latLngBounds オブジェクトを取ります。このオブジェクトには、新しい緯度/経度を含むように境界を調整する便利なextendメソッドがあります。したがって、単一のlatLngBoundsオブジェクトでextendを呼び出して、すべてのポイントをスピンするだけです。これにより、境界が拡張され、すべてのマーカーが含まれます。これを行ったら、このオブジェクトを map のfitBoundsメソッドに渡すと、ズームしますすべての新しいマーカーを表示します。

24
RedBlueThing