位置情報を持ったデータの編集画面、更新
位置情報を持ったデータの編集画面を用意する場合、地図上のマーカーをドラッグできるようにしておき、ユーザーがそのマーカーを移動させることで、データの位置情報を更新するという UI が良く使われます。その場合、ドラッグし終わったマーカーの緯度・経度を取得し、それらの値を hidden フィールドなどに渡します。
ここではそうした場合に使える、ドラックしたマーカーの緯度・経度を取得する方法を紹介します。
ドラッグ可能なマーカーを地図に追加する
<div id="map"></div>
で用意した div タグ内に地図を表示するため、container に div タグの ID である map を指定して geolonia.Map のインスタンスを生成します。地図の中心は、もう一度登場するので、定数 center で定義しておきます。
const center = [135.506306, 34.652499]
const map = new geolonia.Map({
container: 'map',
center: center,
zoom: 16
})
次に geolonia.Marker のインスタンスを生成し、draggable オプションを true とし、ドラッグできるようにします。マーカーの位置を setLngLat で指定し、addTo で地図に追加しています。
const marker = new geolonia.Marker({
draggable: true
})
.setLngLat(center)
.addTo(map)
ドラッグしたマーカーの緯度・経度を取得する
マーカーをドラッグし終わったときに呼び出す関数を以下のように定義します。 marker.getLngLat() でそのときマーカーが指している緯度、経度を取得し、alert でそれぞれの値を表示しています。
function onDragEnd() {
const lngLat = marker.getLngLat()
alert(`緯度: ${lngLat.lat}, 経度: ${lngLat.lng}`)
}
marker がドラッグされ終わったときに dragend イベントが発火されます。このイベントに、上記の関数をひもづけます。
marker.on('dragend', onDragEnd)
コード全体を見るには、以下の CodePen のサンプルコードを参照してください。
See the Pen ドラッグしたマーカーの緯度・経度を取得する by Geolonia (@geolonia) on CodePen.