leaflet入門6|地図に現在地を表示する2

leaflet(1.3)を使ってマップに現在地を表示します。

前回(leaflet入門5)の方法では、ブラウザでマップを表示した際に、現在地情報を取得しました。

今回は、よくある「現在地を取得」のようなボタンが押された際に、位置情報を取得してみたいと思います。

Demoはこちらです。

全体のコード

解説

地図を描画するまでの解説は、leaflet入門1に記載しています。

step1(Geolocation)

前回は、leafletの「locate」を使用しましたが、今回はGeolocation API により現在地を取得します。

Geolocation APIの使用方法ですが、前回の「locate」と同じように

位置情報の取得が成功した場合(success)、失敗した場合(error)の処理をそれぞれ指定します。

successでは、取得した現在地を使用して、現在地にマーカーを設定しています。

・setViewで地図を現在地に移動

・L.markerでマーカーを設定

という流れです。

errorでは、アラートメッセージを表示しています。

step2(getCurrentPosition)

この関数で(navigator.geolocation.getCurrentPosition )、現在地の取得を行います。

現在地の取得は、非同期で行われ取得後の処理は、コールバック関数(ここでは、success関数 もしくは error関数)が呼び出されます。

次回は、現在地のアイコンをGoogle Map風に変更したいと思います。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

コメント

  1. […] 地図を表示します。ElmとのインターフェースであるPortを使います。JavaScriptコードにつきましては以下のサイトを参考にさせていただきました。 leaflet入門6|地図に現在地を表示する2 […]

  2. […] 地図を表示します。ElmとのインターフェースであるPortを使います。JavaScriptコードにつきましては以下のサイトを参考にさせていただきました。 leaflet入門6|地図に現在地を表示する2 […]