web-dev-qa-db-ja.com

すべての目に見えるマーカーをカバーするために、地図の中央にズームを設定しますか？

地図上に複数のマーカーを設定しています。ズームレベルと中心を静的に設定できますが、必要なのは、すべてのマーカーをカバーしてすべての市場を見えるようにできる限りズームすることです

利用可能な方法は以下の通りです

setZoom(zoom:number)

そして

setCenter(latlng:LatLng)

setCenterは複数の位置またはLocation配列入力をサポートしていませんし、setZoomもこのタイプの機能を持っていません

enter image description here

javascriptgoogle-maps-api-3
315
Trikaldarshi

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

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

map.fitBounds(bounds);

ドキュメント from 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の実際のサイズを確保します。

618
Adam

いくつかの役に立つトリックで与えられた答えを拡張するために：

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);
164
d.raev

Google Map開発者の記事 で、Google Mapで利用可能なこのMarkerClustererクライアント側のユーティリティがあります。

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

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

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

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

クラスタリングの前に Before Clustering

クラスタリング後 After Clustering

私はこれがあなたが探していたものであり、これがあなたの問題を解決することを願っています:)

6
iyogeshjoshi

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

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);
    }
}
5
Fotis. Tsilfoglou