[解決済み] Google Maps API V3 で fitBounds() を使用した後に setZoom() を使用する。
2023-07-05 13:24:09
質問
fitBounds()を使って、現在表示されているすべてのマーカーを含むように、地図のズームレベルを設定しています。しかし、マーカーが 1 つしか表示されていない場合、ズーム レベルは 100% になります (ズーム レベルは 20 だと思いますが......)。しかし、私は、ユーザーがズームアウトすることなくマーカーの位置を調整できるように、そこまでズームインして欲しくありません。
次のようなコードがあります。
var marker = this.map.createMarker(view.latlng, this.markerNumber);
this.map.bounds.extend(view.latlng);
this.map.map.setCenter(this.map.bounds.getCenter());
this.map.map.fitBounds(this.map.bounds);
if (this.markerNumber === 1) {
this.map.map.setZoom(16);
}
this.markerNumber++;
ここで、this.map.boundsは以前は次のように定義されていました。
this.map.bounds = new google.maps.LatLngBounds();
しかし、私が抱えている問題は、行の
this.map.map.setZoom(16);
を使用すると動作しないことです。
this.map.map.fitBounds(this.map.bounds);
しかし、fitBound() 行をコメントアウトすると、setZoom() が魔法のように機能し始めるので、コードのその行が正しいことがわかります。
これを解決する方法について何か考えがありますか? これが機能しない場合、代替手段として maxZoom レベルを設定しようと考えています。
どのように解決するのですか?
よし、わかったぞ。どうやらfitbounds()は非同期で行われるようです。
bounds_changed
イベントを待つ必要があります。
map = this.map.map;
map.fitBounds(this.map.bounds);
zoomChangeBoundsListener =
google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
if (this.getZoom()){
this.setZoom(16);
}
});
setTimeout(function(){google.maps.event.removeListener(zoomChangeBoundsListener)}, 2000);
更新
: を使った @Nequin さんの回答を参照してください。
addListenerOnce
を使った、タイムアウトを必要としないより良い解決策を参照してください。
関連
-
[解決済み] forEachループでasync/awaitを使用する
-
[解決済み] Google Maps JS API v3 - シンプルな複数マーカーの例
-
[解決済み] Google Maps APIでマウスのスクロールホイールによる拡大縮小を無効にする方法
-
[解決済み】Google Maps API v3で複数のマーカーを持つ地図を自動中心化する。
-
[解決済み】Google Maps API v3:fitBoundsの後にsetZoomを設定できますか?
-
[解決済み] なぜJavaScriptでは!{}[true]がtrueに評価されるのですか?
-
[解決済み] なぜ "use strict "はパフォーマンスを10倍向上させるのか?
-
[解決済み] node.jsで文字列のsha1ハッシュを取得するにはどうすればよいですか?
-
[解決済み] Node.jsのES6クラスをrequireで作る
-
[解決済み] なぜjavascriptのES6 Promisesはresolve後も実行を継続するのですか?
最新
-
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:fitBoundsの後にsetZoomを設定できますか?
-
[解決済み] チェックボックスが選択されているかどうかを確認するjQuery
-
[解決済み] Angularjs - 現在の日付を表示する
-
[解決済み] WebStormで未解決の変数が大量にある場合の警告に対処する方法は?
-
[解決済み] node.jsで文字列のsha1ハッシュを取得するにはどうすればよいですか?
-
[解決済み] 兄弟ノードを選択する方法はありますか?
-
[解決済み] React js 親コンポーネントから子コンポーネントの状態を変更する
-
[解決済み] JSXとLoadshを使用して、ある要素をn回繰り返す方法
-
[解決済み] jQueryの$という記号の意味は何ですか?
-
[解決済み] javascriptで文字列から関数を作成する方法はありますか?