Google Maps API v3:できまsetZoom後fitBounds?

https://stackoverflow.com/questions/2437683

19-09-2019
|

質問

をセットにしたポイントしたいプロット組み込み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.

いきものたちとふれあうことがでのズームレベルの範囲外なく適用する。その他のアイデアで解決す。

解決

編集：下記のマット・ダイヤモンドさんのコメントを参照してください。

。

は、それを手に入れました！これを試してください：

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

あなたのニーズに変更します。

他のヒント

いるのと同じような問題にもアプリとなります。ちょっとした混乱によるご説明の問題がやろうと思い立ったら、そのときに一つの目標に向かった...

私のアプリたいと思ったプロットつ以上のマーカーを確実に図示しています。この問題ばかりに依存しfitBounds方法、そのズームレベルのも嬉しいですがあった場合は、シングルポイントが次のようなものである。

この溶液を使用fitBoundsが多かった点、setCenter+setZoom場合があるみたいです。

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

私は答えを得るために、このページに複数回来て、既存のすべての答えは、超便利だった一方で、彼らは正確に私の問題を解決していませんでした。

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

は、基本的に私は「zoom_changed」イベントは、i「はアイドル」イベントを待っていた時に起こった「飛ばし」からマップのUIを防ぐことがわかっています。

これは誰かに役立ちます願っています！

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

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

私は間違っていない場合、私はあなたがすべてのあなたのポイントは、可能な限り最高のズームレベルで地図上に表示したいと仮定しています。私は（それがV3に可能な限り最高のズームレベルかどうかわからない）の 16 のへのマップのズームレベルを初期化することによって、これを達成しました。

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

そして、それ以降のIやった範囲のもの：

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

結果：成功！

私が使用します：

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

これは、しかし、それはおそらくとにかくズームを変更し、あなたがズームアウトし、どのくらい気にしない、あなたのコードに応じて24の小さい方と、必要なズームレベルを使用します。

いたるとともに、同誌掲載号の注目したのでこれを解決するために、以下のコードです。このリスナー(google.maps.addListenerOnce() イベントはますます焚きは、 map.fitBounds() が実行されます。なので、する必要がない

追跡および手動で削除リスナー、または
待つまでの地図 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) 
   }
});

同じ問題に必要な合わせ多くのマーカーをまとめたものです。この解決私の場合:

を宣言するの境界
使用スキームによるkoderoid(各マーカーセット bounds.extend(objLatLng))

実行fitbounds後の地図が完成:

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

私はあなたがズームアウト突然ズームインしてないように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変数でビットを遊んでする必要があります。これは、ズームレベルとマップキャンバスの大きさの両方に基づいて変化するであろう。

また、代わりに、緯度経度を使用することができる

これを試してください：

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

と思っていた誤ったや複雑なソリューション、その決定を 、エレガントな解決方法.

その理由 setZoom() 動作しないときは fitBounds() 非同期で保証することをすぐに更新のズーム、お電話で setZoom() に依存します。

ん性を高めることが考えられますがあの設定 minZoom 地図オプションを呼び出す前に、 fitBounds() そして清算することが可能で完了(することにより、ユーザーが縮小する場合は、手動でしたい):

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.

私は、衛星画像を利用できるようになります知っているように、ズームレベルが設定レベルを超えていないことを確認するためにこれを使用します。

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

この機能では、動的関数が任意の形状を受け入れるだけの理由でジオメトリタイプを格納するためのメタデータを追加する必要があります。

"fitGeometries" 地図オブジェクトを拡張JSON関数である。

"ジオメトリ" ジェネリックjavascript配列ではないMVCArray（）である。

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

この作品の私のためのAPI v3のではなく、固定ズームを設定してます：

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

gmap.setCenter(bounds.getCenter()); 
gmap.setZoom( 6 );

あなたがリスナーと遊ぶことを望んでいない場合は、

私のように、これは私が思い付いたシンプルなソリューションです。

：厳密には、このような要件に応じて動作します地図上にメソッドを追加

    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)の ..

これを試してみてください。

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

もしあなたにこの意志役立ちます。

すべてのベスト

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

私はそれを示唆するのが好きではありませんが、あなたはを場合の試みなければならない - 最初の呼び出し

gmap.fitBounds(bounds);

そして、それは20-50msかそこらのために寝るし、
を呼び出している、新しいスレッド/ AsyncTaskを作成
gmap.setZoom( Math.max(6, gmap.getZoom()) );

UIスレッドから（AsyncTaskハンドラまたはonPostExecuteメソッドを使用）。
それが動作するかどうか
私は、ただの提案を知りません。あなたが、何らかの形であなたのポイントから自分をズームレベルを計算する必要があり、それは低すぎるのですかどうかを確認、それを訂正してからちょうどgmap.setZoom(correctedZoom)を呼びたいもの以外

「のbounds_changedは」の代わりに「center_changed」を使用して検討し、その後、（時にはGoogleは完全に座標を受け入れていないようです）が正しく発射されていない場合。
マップが移動した後に、それは必ずしもすぐにではなく実行されますが、
「center_changed」イベントは、呼び出されるたびにfitBounds（）を発生させます。

通常のケースでは、「アイドル」は、まだ最高のイベントリスナーであるが、これはカップルの人々がfitBounds（）の呼び出しとの奇妙な問題に実行して役立つかもしれません。

fitBoundsがのコールバックGoogleマップを参照してください。

別のソリューションでチャイム - 私は「の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); }); } });

私にとっては最も簡単な解決策は、このました
map.fitBounds(bounds); function set_zoom() { if(map.getZoom()) {map.setZoom(map.getZoom() - 1);} else {setTimeout(set_zoom, 5);} } setTimeout(set_zoom, 5);

google.maps.event.addListener(marker, 'dblclick', function () { var oldZoom = map.getZoom(); map.setCenter(this.getPosition()); map.setZoom(parseInt(oldZoom) + 1); });

私がしたすべては、次のとおりです。

map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));

そしてそれは、V3のAPIで動作します。

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow