「react-leaflet」ライブラリで、マップをマウスでドラッグして離した際、その時の地図の中心に表示されている地点の緯度経度を取得する、という機能を実装したので備忘録としてまとめ。
マーカーをドラッグしたところの緯度経度を求めたことはあったのですが、地図の中心の緯度経度を取得する方法は知らなかったので、ちょっと手間取りました…。
参考にさせていただいた記事はこちらから。
Getting center of map after drag end · Issue #97 · PaulLeCam/react-leaflet
https://github.com/PaulLeCam/react-leaflet/issues/97
サンプルコードは下記のとおりです。
まず、<Map> コンポーネントに onMoveEnd() を定義します。
こちらは名前のとおり、マップをドラッグして、手を離したタイミングで呼び出されます。
<Map
center={this.state.latlng}
zoom={12}
onMoveEnd={this.onMoveEnd.bind(this)}>
{/* ... */}
</Map>
で、その onMoveEnd() で呼び出す関数の内容は下記のとおりです。
this.onMoveEnd = e => {
const lat = e.target.getCenter().lat;
const lng = e.target.getCenter().lng;
this.setState({ latlng: [lat, lng] });
}
ポイントは 2行目の e.target.getCenter() で、こちらを実行すると、地図の中心に表示されている地点の緯度経度を取得することができます。
あとは、こちらを state の latlng にセットすれば、マップの中心座標がその地点に書き換わります。
処理としては以上です！
.getCenter() を今まで使ったことがなかったので存在すら知らなかったのですが…改めて react-leaflet と Leaflet のドキュメントを確認したらありました。
個人的に、緯度経度の取得＝マップマーカーを移動させる or 地図上でクリックが、操作的に分かりやすいと思っていたのですが、マーカー不動で地図を動かす方が分かりやすい場合もあるのですね…。
勉強になります。
以上、react-leaflet ライブラリで、地図の中心に表示されている地点の緯度経度を取得する方法についてでした。
ご参考になれば幸いです。
