【React】「React Leaflet」ライブラリでダブルクリックした場所の緯度経度を取得する

タイトル通り、React Leaflet で表示した地図の上でダブルクリックしたことを検知し、その場所の緯度経度を取得する方法についてです。
記述内容としては大したことはないのですが、そもそもダブルクリックした時のメソッド名が分からずかなり苦労したので…。
… React Leaflet のドキュメントを読むのが下手です。

 

サンプルコードは下記のとおりです。

<Map
  center={this.state.latlng}
  doubleClickZoom={false}
  onDblclick={this.onDblclick}>
  ......
</Map>

上記のように、onDblclick に、地図をダブルクリックした時に実行したい関数を指定します。
この onDblclick を見つけるのに、何故か滅茶苦茶手間取ってしまいました…!
結局、Leaflet の公式ページから、ダブルクリック検知のメソッドを見つけて、それを記述したら動いた!という感じです。

なお、デフォルトでは地図上でダブルクリックをするとズームインする機能が有効になっていますが、今回のサンプルではそれを無効にしています。
3行目の doubleClickZoom={false} がそうです。
こちらはお好みで ON/OFF を切り替えてください。

次に、onDblclick で呼び出している関数の内容がこちら。

this.onDblclick = e => {
    const lat = e.latlng.lat;
    const lng = e.latlng.lng;
    this.setState({ latlng: [lat, lng] });
}

このあたりは、マップマーカー移動時と同じなので、そこまで苦労せずに指定できました。
サンプルコードでは、マップ中央の緯度経度は state で管理しているので、それを上書きするようにしているだけです。
記述内容は以上です!

 

以上、React Leaflet で地図上をダブルクリックした時に、その地点の緯度・経度を取得する方法についてでした。
ご参考になれば幸いです。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG