質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

376閲覧

googlemapapiのsetZoom()メソッドを使って、ズームの調整をしたい。

somak

総合スコア24

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2023/04/30 14:12

編集2023/05/01 09:05

実現したいこと

googlemapapiのsetZoom()メソッドを使って、ズームの調整をしたい。

前提

googlemapapiを使って、javascriptでgooglemapを利用したアプリを作成しています。

発生している問題・エラーメッセージ

指定したmarkerが現在のzoomレベルに入っている場合は、mapの中心座標をmarkerの座標にし、zoomします。
指定したmarkerが現在のzoomレベルに入っていない場合は、setIntervalを使って、指定したmarkerが範囲に入るまでズームレベルまでズームアウトし、範囲に入ったら、panToメソッドを使いmapの中心座標がmarkerの座標に一致するまで緩やかにスライドさせます。その後、 map.setZoom(10) でzoomしたいのですが、zoom出来ません。

javascript

1zoomMapToLevel(marker) { 2 const map = this.controlMap.map; //mapオブジェクト 3 4 // 指定したmarkerが現在のzoomレベルに入っている場合 5 if (map.getBounds().contains(marker.getPosition())) { 6 // マップの中心をマーカーに合わせる 7 map.setCenter(marker.getPosition()); 8 map.setZoom(10); 9 return; 10 } 11 12 const interval = setInterval(() => { 13 // 現在のズームレベルを取得 14 let currentZoom = map.getZoom(); 15 16 // 指定したmarkerが範囲に入るまでズームレベルまでズームアウト 17 if (!map.getBounds().contains(marker.getPosition())) { 18 map.setZoom(currentZoom - 1); 19 } else { 20 clearInterval(interval); 21 // ズームが終了した後に中心点を移動する 22 const panOptions = { 23 duration: 500, // 移動時間(ミリ秒) 24 easing: "linear" // 移動アニメーションのタイプ 25 }; 26 map.panTo(marker.getPosition(), panOptions); 27 map.setZoom(10) //ここのsetZoomが効かない 28 } 29 }, 100); 30 }

試したこと

javascript

1map.panTo(marker.getPosition(), panOptions); 2map.addListener('center_changed', function() { 3 // 地図の中心が移動し終わった時にズームレベルを変更する 4 map.setZoom(10); 5});

addListener() メソッドを使って、地図の中心位置が移動し終わった時にコールバック関数を実行しようとしましたが、うまくいきませんでした。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2023/04/30 23:05

Javascriptのエラーがないかは確認しましたか?
somak

2023/05/01 00:05

返信ありがとうございます。 確認しましたが、問題はありませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問