[解決済み] 地図上のマーカーをすべてカバーするために、地図の中心/ズームを設定しますか?
2022-03-26 08:06:02
質問
地図上に複数のマーカーを設定していますが、ズームレベルや中心を静的に設定することができます。
利用可能な方法は以下の通りです。
そして
どちらも
setCenter
は、複数の場所や場所配列の入力をサポートしていません。
setZoom
はこのような機能を備えていません。
解決方法は?
を使用する必要があります。
fitBounds()
メソッドを使用します。
var markers = [];//some array
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
bounds.extend(markers[i]);
}
map.fitBounds(bounds);
ドキュメンテーション から developers.google.com/maps/documentation/javascript :
<ブロッククオート
fitBounds(bounds[, padding])
パラメータです。
`bounds`: [`LatLngBounds`][1]|[`LatLngBoundsLiteral`][1]
`padding` (optional): number|[`Padding`][1]
戻り値です。 なし
与えられた境界を含むようにビューポートを設定します。
備考
: マップに設定されている場合
display: none
は、その
fitBounds
関数は、マップの大きさを
0x0
そのため、何もしません。マップを非表示にした状態でビューポートを変更するには、マップを
visibility: hidden
これにより、map div が実際のサイズになるようにします。
関連
-
Vue Element-uiは、アイコンを追加するためのツリーコントロールノードを詳細に実装しています。
-
要素ツリー制御によるvueTreeテーブル
-
JavaScriptの配列共通メソッド解説
-
Vueのフィルタの説明
-
[解決済み] テスト
-
[解決済み】リソースの読み込みに失敗した:Bind関数でサーバーが500(Internal Server Error)のステータスで応答した【非公開
-
[解決済み】ExpressJS - throw er Unhandled errorイベント
-
[解決済み】JavaScriptでインラインIF文の書き方は?
-
[解決済み】(Google Map API) Geocodeは以下の理由で成功しませんでした。REQUEST_DENIED
-
[解決済み】Google Map API v3 - 境界と中心を設定する
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
Vue+ElementUIによる大規模なフォームの処理例
-
vueのグローバルがscss(mixin)を導入。
-
vueディレクティブv-bindの使用と注意点
-
[解決済み】Node.jsで "Cannot find module "エラーを解決するには?
-
[解決済み】ReactJSでエラー発生 Uncaught TypeError: Super expression は null か関数でなければならず、undefined ではありません。
-
フロントエンド非同期(アシンク)ソリューション(全ソリューション)
-
JSクリックイベント - Uncaught TypeError: プロパティ 'onclick' に null を設定できません。
-
jq は html ページとデータを動的に分割する。
-
[解決済み】Google Map API v3 - 境界と中心を設定する
-
[解決済み】Google Maps API v3:fitBoundsの後にsetZoomを設定できますか?