表示されているすべてのマーカーをカバーするようにマップの中心に設定/ズームを設定しますか?


352

マップに複数のマーカーを設定し、ズームレベルと中心を静的に設定できますが、すべてのマーカーをカバーし、すべての市場が見えるように可能な限りズームすることが目的です

利用可能な方法は次のとおりです

setZoom(zoom:number)

そして

setCenter(latlng:LatLng)

どちらもsetCenter複数の場所や場所の配列の入力をサポートしていることも、setZoomこの種の機能を持っていません

ここに画像の説明を入力してください



あなたが追加する必要があるlatlngboundsオブジェクトあなたは、マーカーを追加するたびに、最終的な境界に合わせてマップを設定します。ここで答えを参照してください。stackoverflow.com/questions/1556921/...
Suvi Vignarajah

回答:


678

fitBounds()メソッドを使用する必要があります。

var markers = [];//some array
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
 bounds.extend(markers[i]);
}

map.fitBounds(bounds);

developers.google.com/maps/documentation/javascriptからのドキュメント

fitBounds(bounds[, padding])

パラメーター:

`bounds`:  [`LatLngBounds`][1]|[`LatLngBoundsLiteral`][1]
`padding` (optional):  number|[`Padding`][1]

戻り値: なし

指定された境界を含むようにビューポートを設定します。
:マップがに設定されているdisplay: none場合、fitBounds関数はマップのサイズをとして読み取るため、0x0何も実行されません。マップが非表示のときにビューポートを変更するには、マップをvisibility: hiddenに設定して、マップdivが実際のサイズになるようにします。


3
なかったどこからgetPosition方法から来ましたの?
Pratheep 2016

6
@Pratheep-google.maps.Markerクラスの一部です。developers.google.com/maps/documentation/javascript/...
アダム

魅力のように働いた!ありがとう
ジョセフN.

9
Pratheepと同じ質問で、世の初心者のための余談と同じように... Maps APIの経験がある場合はこれを知っていますがLatLngLiteral、Markerインスタンスを使用する代わりに、常にを渡すことができます。例えば、bounds.extend({lat: 123, lng: 456})
カイルベイカー

1
興味のある人のための追加のヒント。を使用してパディングを定義できます。fitBounds(bounds, int)これにより、マーカーとマップエッジの間にわずかなスペースを確保できます(必要な場合はスペースを狭くできます)。ドキュメントを参照
MickelsonMichael 2018

178

与えられた答えをいくつかの便利なトリックで拡張するには:

var markers = //some array;
var bounds = new google.maps.LatLngBounds();
for(i=0;i<markers.length;i++) {
   bounds.extend(markers[i].getPosition());
}

//center the map to a specific spot (city)
map.setCenter(center); 

//center the map to the geometric center of all markers
map.setCenter(bounds.getCenter());

map.fitBounds(bounds);

//remove one zoom level to ensure no marker is on the edge.
map.setZoom(map.getZoom()-1); 

// set a minimum zoom 
// if you got only 1 marker or all markers are on the same address map will be zoomed too much.
if(map.getZoom()> 15){
  map.setZoom(15);
}

//Alternatively this code can be used to set the zoom for just 1 marker and to skip redrawing.
//Note that this will not cover the case if you have 2 markers on the same address.
if(count(markers) == 1){
    map.setMaxZoom(15);
    map.fitBounds(bounds);
    map.setMaxZoom(Null)
}

更新:
トピックのさらなる調査により、fitBounds()は非同期であり、Fit Boundsを呼び出す前に定義されたリスナーを使用してズーム操作を行うことが最善であることが示されています。
@ Tim、@ xr280xr、トピックに関する他の例に感謝:SO:setzoom-after-fitbounds

google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
  this.setZoom(map.getZoom()-1);

  if (this.getZoom() > 15) {
    this.setZoom(15);
  }
});
map.fitBounds(bounds);

4
良い追加。ありがとう!
paneer_tikka 2015

1
.getZoom()によって未定義が返されていました。この回答は、値が初期化された後にaddListenerOnceon zoom_changedを使用してズームを設定することで解決しました。
xr280xr

1
@ d.raevに感謝しますが、境界がすでに設定されているときに最大ズームを設定しても機能しません。あなたがしなければならないことは、マップを初期化するときに「maxZoom」オプションを設定することです。developers.google.com/maps/documentation/javascript/...
ティム・

1
ズーム操作(UPDATE)の部分では、2つの変数とスコープを混在させています。あなたは、使用yourMapmapおよびthis。多分それをより一貫性のあるものにすることは良い考えです。
Gustavo Straube 2016

11

配列のサイズはゼロより大きくなければなりません。Οそうしないと、予期しない結果になります。

function zoomeExtends(){
  var bounds = new google.maps.LatLngBounds();
  if (markers.length>0) { 
      for (var i = 0; i < markers.length; i++) {
         bounds.extend(markers[i].getPosition());
        }    
        myMap.fitBounds(bounds);
    }
}

8

このGoogle Map開発者の記事MarkerClusterer指定されているように、Google Mapで利用できるこのクライアント側ユーティリティがあります。ここでは、その使用方法について簡単に説明します。

あなたが要求したことをするための多くのアプローチがあります:

  • グリッドベースのクラスタリング
  • 距離ベースのクラスタリング
  • ビューポートマーカー管理
  • フュージョンテーブル
  • マーカークラスタラー
  • MarkerManager

あなたは上記の提供されたリンクでそれらについて読むことができます。

Marker Clustererグリッドベースのクラスタリングを使用して、グリッドを希望するすべてのマーカーをクラスター化します。グリッドベースのクラスタリングは、マップを特定のサイズの正方形(サイズはズームごとに変化します)に分割し、マーカーを各グリッドの正方形にグループ化することで機能します。

クラスタリング前 クラスタリング前

クラスタリング後 クラスタリング後

これがあなたが探していたものであることを願っています&これがあなたの問題を解決するでしょう:)

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.