埋め込まれた 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);
});
必要に応じて変更してください。
アプリの 1 つで同様の問題を解決しました。問題の説明に少し混乱しましたが、私と同じ目標を持っていると思います...
私のアプリでは、1 つ以上のマーカーをプロットし、マップがそれらすべてを表示していることを確認したいと考えていました。問題は、fitBounds メソッドだけに頼っていると、1 つのポイントがあるときにズーム レベルが最大になってしまうことでした。これは良くありませんでした。
解決策は、点が多い場合は fitBounds を使用し、点が 1 つしかない場合は 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」イベントにより、「idle」イベントを待っているときに発生したマップの UI の「スキップ」が防止されることがわかりました。
これが誰かに役立つことを願っています!
事前に maxZoom を設定し、後で削除することでこれを修正しました。例えば：
map.setOptions({ maxZoom: 15 });
map.fitBounds(bounds);
map.setOptions({ maxZoom: null });
これを試してください：
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);
私が間違っていなければ、可能な限り最高のズーム レベルでマップ上にすべてのポイントを表示したいと考えていると思います。マップのズーム レベルを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);
結果：成功！
私が使う：
gmap.setZoom(24); //this looks a high enough zoom value
gmap.fitBounds(bounds); //now the fitBounds should make the zoom value only less
これは、コードに応じて 24 と必要なズーム レベルの小さい方を使用しますが、ズームを変更する可能性があり、どれだけズームアウトしたかは気にしません。
正しくない、または複雑すぎるソリューションを多数見たので、機能するエレガントなソリューションを投稿することにしました。
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のドキュメントを参照してください。
電話をかける前にチェックを行うソリューションを見つけた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 変数を少しいじる必要があります。ズーム レベルとマップ キャンバスのサイズの両方によって異なります。
緯度の代わりに経度を使用することもできます
同じ問題があり、マップ上に多くのマーカーを合わせる必要がありました。これで私のケースは解決しました：
bounds.extend(objLatLng))マップが完了した後に fitbounds を実行します。
google.maps.event.addListenerOnce(map, 'idle', function() {
map.fitBounds( bounds );
});
同じ問題があり、次のコードを使用して解決できました。このリスナー ( ) イベントは、が実行されたgoogle.maps.addListenerOnce()直後に 1 回だけ発生します。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)
}
});
これを使用して、ズームレベルが設定レベルを超えないようにし、衛星画像が利用できるようにします。
イベントにリスナーを追加しますzoom_changed。これには、UIのズームコントロールを制御するという追加の利点もあります。
setZoom必要な場合にのみ実行するため、ステートメントifはMath.maxMath.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);
この作業は、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)をオーバーライドします..
この関数では、関数がすべてのジオメトリを受け入れるため、メタデータを動的に追加してジオメトリ タイプのみを格納する必要があります。
「fitGeometries」は、マップ オブジェクトを拡張する JSON 関数です。
「ジオメトリ」は、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);
},
これを試してみてください。
// 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);
}
これがあなたに役立つなら。
ではごきげんよう
境界の計算後、左上隅と右下隅の間の距離を確認できます。次に、距離をテストすることでズームレベルを理解できます（距離が遠すぎる場合はズームレベルが低くなります）。次に、setbound メソッドまたは setZoom を使用して選択できます。
「bounds_changed」が正しく起動しない場合 (Google が座標を完全に受け入れないように見える場合があります)、代わりに「center_changed」の使用を検討してください。
「center_changed」イベントは、fitBounds() が呼び出されるたびに発生しますが、マップが移動した直後に実行されるとは限りません。
通常の場合、'idle' は依然として最良のイベント リスナーですが、これは fitBounds() 呼び出しで奇妙な問題に遭遇した 2 人の人々を助けるかもしれません。
Google マップの fitBounds コールバックを参照してください
私はそれを提案するのは好きではありませんが、試してみる必要がある場合は、最初に電話してください
gmap.fitBounds(bounds);
次に、新しい Thread/AsyncTask を作成し、20 ～ 50 ミリ秒程度スリープさせてから呼び出します。
gmap.setZoom( Math.max(6, gmap.getZoom()) );
UI スレッドから (ハンドラーまたはonPostExecuteAsyncTask のメソッドを使用します)。
うまくいくかどうかわかりませんが、ただの提案です。それ以外は、自分のポイントからズームレベルを何らかの方法で計算し、低すぎるかどうかを確認し、修正してから呼び出す必要がありますgmap.setZoom(correctedZoom)
私がしたのは：
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
そしてそれはV3APIで動作します。