[解決済み] Google Maps v3:fitBounds使用時に最小ズームレベルを強制する
2023-05-28 19:48:45
質問
地図上に一連のマーカーを描画しています(v3 of the maps apiを使用)。
v2では以下のようなコードでした。
bounds = new GLatLngBounds();
... loop thru and put markers on map ...
bounds.extend(point);
... end looping
map.setCenter(bounds.getCenter());
var level = map.getBoundsZoomLevel(bounds);
if ( level == 1 )
level = 5;
map.setZoom(level > 6 ? 6 : level);
そしてそれは、地図上に常に適切なレベルの詳細が表示されることを保証するためにうまく機能しました。
私はこの機能を v3 で複製しようとしていますが、setZoom と fitBounds が協調していないようです。
... loop thru and put markers on the map
var ll = new google.maps.LatLng(p.lat,p.lng);
bounds.extend(ll);
... end loop
var zoom = map.getZoom();
map.setZoom(zoom > 6 ? 6 : zoom);
map.fitBounds(bounds);
いろいろな順列を試しましたが(たとえば、setZoomの前にfitBoundsを移動する)、setZoomで行うことは何もマップに影響を与えないようです。 私は何かを見逃しているのでしょうか? これを行う方法はありますか?
どのように解決するのですか?
で Google Groups のこのディスカッション 私は、基本的にfitBoundsを行うとき、ズームは非同期に起こるので、ズームとboundsの変更イベントをキャプチャする必要があることを発見しました。 最後の投稿にあるコードは、小さな修正で私のために動作しました...そのままでは15以上のズームを完全に止めてしまうので、4番目の投稿のアイデアを使用して、初回のみそれを行うようにフラグを設定するようにしたのです。
// Do other stuff to set up map
var map = new google.maps.Map(mapElement, myOptions);
// This is needed to set the zoom after fitbounds,
google.maps.event.addListener(map, 'zoom_changed', function() {
zoomChangeBoundsListener =
google.maps.event.addListener(map, 'bounds_changed', function(event) {
if (this.getZoom() > 15 && this.initialZoom == true) {
// Change max/min zoom here
this.setZoom(15);
this.initialZoom = false;
}
google.maps.event.removeListener(zoomChangeBoundsListener);
});
});
map.initialZoom = true;
map.fitBounds(bounds);
お役に立てれば幸いです。
アンソニー
関連
-
[解決済み] Google Maps JS API v3 - シンプルな複数マーカーの例
-
[解決済み】Google Maps API v3:fitBoundsの後にsetZoomを設定できますか?
-
[解決済み] JavaScriptを使用してHTML要素に属性を追加/更新するには?
-
[解決済み] AngularJS - ngRepeatフィルタリングされた結果の参照を取得する方法
-
[解決済み] Chromeの拡張機能開発にWebStormを使用するにはどうすればよいですか?
-
[解決済み] 文字列とラベルのローカライズとグローバリゼーションのベストプラクティス【終了しました
-
[解決済み] Chromeのwebkitインスペクタで「Unsafe JavaScript attempt to access frame with URL...」というエラーが継続的に発生する。
-
[解決済み] JavaScriptで長い配列を小さい配列に分割する方法
-
[解決済み] Prototypeを使ってtextareaを自動サイズ調整するには?
-
[解決済み] 変異を伴わないオブジェクトからの値の削除
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Google Maps API v3で複数のマーカーを持つ地図を自動中心化する。
-
[解決済み】Google Maps API v3:fitBoundsの後にsetZoomを設定できますか?
-
[解決済み] なぜ "use strict "はパフォーマンスを10倍向上させるのか?
-
[解決済み] TypeScriptのdeclare classとinterfaceの違いとは?
-
[解決済み] Javascriptで動的に命名されたメソッドを呼び出すにはどうすればよいですか?
-
[解決済み] react-routerのハッシュフラグメントからクエリパラメータを取得する
-
[解決済み] 各オブジェクトに?重複
-
[解決済み] Javascript の parseInt() で先頭のゼロを削除する。
-
[解決済み] Prototypeを使ってtextareaを自動サイズ調整するには?
-
[解決済み] jQueryを使用して、すべてのクリックイベントハンドラを削除するにはどうすればよいですか?