web-dev-qa-db-ja.com

Google Maps API v3：fitBoundsの後にsetZoomを設定できますか？

埋め込みGoogleマップ（API v3）にプロットするポイントのセットがあります。ズームレベルが低すぎる（つまり、ズームアウトが大きすぎる）場合を除き、すべてのポイントに対応するように境界を設定します。私のアプローチは次のようなものです。

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

// extend bounds with each point

gmap.fitBounds(bounds); 
gmap.setZoom( Math.max(6, gmap.getZoom()) );

これは機能しません。最後の行「gmap.setZoom（）」は、fitBoundsの直後に呼び出された場合、マップのズームレベルを変更しません。

地図に適用せずに境界のズームレベルを取得する方法はありますか？これを解決する他のアイデアは？

javascriptgoogle-mapsgoogle-maps-api-3fitbounds
195
chris

編集：以下のMatt Diamondのコメントを参照してください。

とった！これを試して：

map.fitBounds(bounds);
var listener = google.maps.event.addListener(map, "idle", function() { 
  if (map.getZoom() > 16) map.setZoom(16); 
  google.maps.event.removeListener(listener); 
});

ニーズに合わせて変更します。

324
LGT

アプリの1つで同様の問題を解決しました。問題の説明に少し混乱しましたが、あなたは私と同じ目標を持っていると思います...

私のアプリでは、1つ以上のマーカーをプロットして、マップにそれらがすべて表示されるようにしました。問題は、もしも私がfitBoundsメソッドだけに頼っていた場合、単一のポイントがあったときにズームレベルが最大になるということでした-それは良くありませんでした。

解決策は、ポイントが多い場合はfitBoundsを使用し、ポイントが1つしかない場合はsetCenter + setZoomを使用することでした。

if (pointCount > 1) {
  map.fitBounds(mapBounds);
}
else if (pointCount == 1) {
  map.setCenter(mapBounds.getCenter());
  map.setZoom(14);
}
66
Jim Garvin

答えを得るために何度もこのページにアクセスしましたが、既存の答えはすべて非常に役に立ちましたが、私の問題を正確には解決しませんでした。

google.maps.event.addListenerOnce(googleMap, 'zoom_changed', function() {
    var oldZoom = googleMap.getZoom();
    googleMap.setZoom(oldZoom - 1); //Or whatever
});

基本的に、「zoom_changed」イベントは、「アイドル」イベントを待っているときに発生したマップのUIの「スキップ」を防止することがわかりました。

これが誰かを助けることを願っています！

43
Benjamin Sussman

事前にmaxZoomを設定し、その後削除することでこれを修正しました。例えば：

map.setOptions({ maxZoom: 15 });
map.fitBounds(bounds);
map.setOptions({ maxZoom: null });
11
Robin Whittleton

間違っていなければ、すべてのポイントを可能な限り高いズームレベルで地図上に表示したいと考えています。マップのズームレベルを16（V3で可能な限り最高のズームレベルであるかどうかは不明）に初期化することでこれを達成しました。

var map = new google.maps.Map(document.getElementById('map_canvas'), {
  zoom: 16,
  center: marker_point,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

その後、私は境界のことをしました：

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

// You can have a loop here of all you marker points
// Begin loop
bounds.extend(marker_point);
// End loop

map.fitBounds(bounds);

結果：成功！

4
Lester S

私が使う：

gmap.setZoom(24); //this looks a high enough zoom value
gmap.fitBounds(bounds); //now the fitBounds should make the zoom value only less

これは、コードに応じて小さいほうの24と必要なズームレベルを使用しますが、おそらくズームを変更し、ズームアウトの程度は気にしません。

3
ytg

これを試してください：

map.fitBounds(bounds);

// CHANGE ZOOM LEVEL AFTER FITBOUNDS
zoomChangeBoundsListener = google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
  if (this.getZoom()){
    this.setZoom(15);
  }
});
setTimeout(function(){
  google.maps.event.removeListener(zoomChangeBoundsListener)
}, 2000);
2
Atif Tariq

多くの誤ったソリューションや複雑すぎるソリューションを見つけたため、実用的でエレガントなソリューションを投稿することにしました。

setZoom()が期待どおりに動作しない理由は、fitBounds()が非同期であるため、ズームがすぐに更新されるという保証はありませんが、setZoom()への呼び出しはそれに依存しています。

考えられるのは、fitBounds()を呼び出す前にminZoomマップオプションを設定し、完了後にクリアすることです（ユーザーが必要に応じて手動でズームアウトできるように）。

var bounds = new google.maps.LatLngBounds();
// ... (extend bounds with all points you want to fit)

// Ensure the map does not get too zoomed out when fitting the bounds.
gmap.setOptions({minZoom: 6});
// Clear the minZoom only after the map fits the bounds (note that
// fitBounds() is asynchronous). The 'idle' event fires when the map
// becomes idle after panning or zooming.
google.maps.event.addListenerOnce(gmap, 'idle', function() {
  gmap.setOptions({minZoom: null});
});

gmap.fitBounds(bounds);

さらに、最大ズームも制限する場合は、maxZoomプロパティを使用して同じトリックを適用できます。

MapOptions docs を参照してください。

2
Svilen Marchev

同じ問題があり、多くのマーカーをマップに合わせる必要がありました。これは私のケースを解決しました：

  1. 境界を宣言する
  2. Koderoidが提供するスキームを使用（各マーカーセットbounds.extend(objLatLng)）

  3. マップの完了後にfitboundsを実行します。

    google.maps.event.addListenerOnce(map, 'idle', function() { 
    map.fitBounds( bounds );
});
2
ishubin

fitBoundsを呼び出す前にチェックを行うソリューションを見つけたので、ズームインせずに突然ズームアウトします

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

// extend bounds with each point

var minLatSpan = 0.001;
if (bounds.toSpan().lat() > minLatSpan) {
    gmap.fitBounds(bounds); 
} else {
    gmap.setCenter(bounds.getCenter());
    gmap.setZoom(16);
}

必要な場所で取得するには、minLatSpan変数を少し試す必要があります。これは、ズームレベルとマップキャンバスのサイズの両方に基づいて異なります。

緯度の代わりに経度を使用することもできます

2
CheapSteaks

これはAPI v3での作業ですが、固定ズームの設定があります：

var bounds = new google.maps.LatLngBounds();
// extend bounds with each point

gmap.setCenter(bounds.getCenter()); 
gmap.setZoom( 6 );
1
Pedro Blaszczak

同じ問題があり、次のコードを使用して解決できました。このリスナー（google.maps.addListenerOnce()）イベントは、map.fitBounds()が実行された直後に一度だけ起動されます。だから、する必要はありません

  1. リスナーを追跡して手動で削除する、または
  2. マップがidleになるまで待ちます。

最初に適切なズームレベルを設定し、イベントリスナーの有効期限が切れているため、ユーザーは初期ズームレベルを超えてズームインおよびズームアウトできます。たとえば、google.maps.addListener()のみが呼び出された場合、ユーザーは 決して 指定されたズームレベル（この場合は4）を超えてズームインできます。 google.maps.addListenerOnce()を実装したため、ユーザーは選択した任意のレベルにズームできます。

map.fitBounds(bounds);

var zoom_level_for_one_marker = 4;

google.maps.event.addListenerOnce(map, 'bounds_changed', function(event){
   if (this.getZoom() >= zoom_level_for_one_marker){  
       this.setZoom(zoom_level_for_one_marker) 
   }
});
1
9monkeys

私のように、リスナーと遊びたくない場合、これは私が思いついた簡単な解決策です：このようなあなたの要件に厳密に従って機能するマップ上のメソッドを追加します：

    map.fitLmtdBounds = function(bounds, min, max){
        if(bounds.isEmpty()) return;
        if(typeof min == "undefined") min = 5;
        if(typeof max == "undefined") max = 15;

        var tMin = this.minZoom, tMax = this.maxZoom;
        this.setOptions({minZoom:min, maxZoom:max});
        this.fitBounds(bounds);
        this.setOptions({minZoom:tMin, maxZoom:tMax});
    }

次に、map.fitLmtdBounds(bounds)の代わりにmap.fitBounds(bounds)を呼び出して、定義されたズーム範囲の下で境界を設定するか、またはmap.fitLmtdBounds(bounds,3,5)を呼び出してズーム範囲をオーバーライドします。

1
Kanak Singhal

この関数では、メタデータを動的に追加して、ジオメトリタイプを格納する必要があります。これは、この関数がジオメトリを受け入れるためです。

「fitGeometries」は、マップオブジェクトを拡張するJSON関数です。

「geometries」は、MVCArray（）ではなく一般的なjavascript配列です。

geometry.metadata = { type: "point" };
var geometries = [geometry];

fitGeometries: function (geometries) {
    // go and determine the latLngBounds...
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < geometries.length; i++) {
        var geometry = geometries[i];
        switch (geometry.metadata.type)
        {
            case "point":
                var point = geometry.getPosition();
                bounds.extend(point);
                break;
            case "polyline":
            case "polygon": // Will only get first path
                var path = geometry.getPath();
                for (var j = 0; j < path.getLength(); j++) {
                    var point = path.getAt(j);
                    bounds.extend(point);
                }
                break;
        }
    }
    this.getMap().fitBounds(bounds);
},
1
CrazyEnigma

これを使用して、ズームレベルが設定レベルを超えないようにして、衛星画像が利用できるようにします。

zoom_changedイベントにリスナーを追加します。これには、UIのズームコントロールも制御できるという追加の利点があります。

必要な場合にのみsetZoomを実行します。したがって、ifステートメントはMath.maxまたはMath.minよりも望ましいです。

   google.maps.event.addListener(map, 'zoom_changed', function() { 
      if ( map.getZoom() > 19 ) { 
        map.setZoom(19); 
      } 
    });
    bounds = new google.maps.LatLngBounds( ... your bounds ... )
    map.fitBounds(bounds);

ズームアウトしすぎないようにするには：

   google.maps.event.addListener(map, 'zoom_changed', function() { 
      if ( map.getZoom() < 6 ) { 
        map.setZoom(6); 
      } 
    });
    bounds = new google.maps.LatLngBounds( ... your bounds ... )
    map.fitBounds(bounds);
1
Mantis

「bounds_changed」が正しく起動しない場合（Googleが座標を完全に受け入れないように見える場合があります）、代わりに「center_changed」の使用を検討してください。

'center_changed'イベントはfitBounds（）が呼び出されるたびに発生しますが、マップが移動した後ではなく、すぐに実行されます。

通常の場合、「アイドル」は依然として最高のイベントリスナーですが、これは、fitBounds（）呼び出しで奇妙な問題に直面するカップルを助けるかもしれません。

google maps fitBoundsコールバック を参照してください

0
tempranova

境界の計算後、左上隅と右下隅の間の距離を確認できます。次に、距離をテストすることでズームレベルを理解できます（距離が遠すぎる場合はズームレベルが低くなります）。その後、setboundメソッドまたはsetZoomを使用して、wheterを選択できます。

0
Orhun Alp Oral

私にとって最も簡単な解決策はこれでした：

map.fitBounds(bounds);

function set_zoom() {
    if(map.getZoom()) {map.setZoom(map.getZoom() - 1);}
    else {setTimeout(set_zoom, 5);}
}
setTimeout(set_zoom, 5);
0
horace

私はそれを提案するのは好きではありませんが、must try-first call

gmap.fitBounds(bounds);

次に、新しいThread/AsyncTaskを作成し、20〜50ミリ秒程度スリープさせてから呼び出します

gmap.setZoom( Math.max(6, gmap.getZoom()) );

uIスレッドから（AsyncTaskのハンドラーまたはonPostExecuteメソッドを使用します）。

動作するかどうかはわかりませんが、単なる提案です。それ以外は、自分でポイントからズームレベルを何らかの方法で計算し、低すぎるかどうかを確認し、修正してからgmap.setZoom(correctedZoom)を呼び出す必要があります

0
Joseph Earl

これを試してください。

// Find out what the map's zoom level is
zoom = map.getZoom();
if (zoom == 1) {
  // If the zoom level is that low, means it's looking around the
world.
  // Swap the sw and ne coords
  viewportBounds = new
google.maps.LatLngBounds(results[0].geometry.location, initialLatLng);
  map.fitBounds(viewportBounds);
}

これがあなたに役立つなら。

ではごきげんよう

0
Kanak Vaghela

別の解決策を取り入れるには-「bounds_changedイベントをリッスンしてから、新しいズームを設定する」アプローチが、私にとって確実に機能しないことがわかりました。マップが完全に初期化される前にfitBoundsを呼び出すことがあり、fitBoundsが境界とズームレベルを変更する前に、リスナーを使い果たすbounds_changedイベントが初期化によって発生したと思います。私はこのコードで終わりましたが、今のところうまくいくようです：

// If there's only one marker, or if the markers are all super close together,
// `fitBounds` can zoom in too far. We want to limit the maximum zoom it can
// use.
//
// `fitBounds` is asynchronous, so we need to wait until the bounds have
// changed before we know what the new zoom is, using an event handler.
//
// Sometimes this handler gets triggered by a different event, before
// `fitBounds` takes effect; that particularly seems to happen if the map
// hasn't been fully initialized yet. So we don't immediately remove the
// listener; instead, we wait until the 'idle' event, and remove it then.
//
// But 'idle' might happen before 'bounds_changed', so we can't set up the
// removal handler immediately. Set it up in the first event handler.

var removeListener = null;
var listener = google.maps.event.addListener(map, 'bounds_changed', () => {
  console.log(map.getZoom());
  if (map.getZoom() > 15) {
    map.setZoom(15);
  }

  if (!removeListener) {
    removeListener = google.maps.event.addListenerOnce(map, 'idle', () => {
      console.log('remove');
      google.maps.event.removeListener(listener);
    });
  }
});
0
philh