タイトル通り、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 で地図上をダブルクリックした時に、その地点の緯度・経度を取得する方法についてでした。
ご参考になれば幸いです。