実現したいこと
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() メソッドを使って、地図の中心位置が移動し終わった時にコールバック関数を実行しようとしましたが、うまくいきませんでした。
あなたの回答
tips
プレビュー