leaflet入門5|地図に現在地を表示する1

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

Demoはこちらです。

全体のコード

解説

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

step1(locationfound)

位置情報の取得が成功した際の、イベントを登録します。

コードでは、locationfoundイベントにonLocationFound関数を登録しているため

位置情報の取得が成功した場合に、onLocationFound関数が実行され

現在位置にマーカーが表示されます。

step2(locationerror)

位置情報の取得が失敗した際の、イベントを登録します。

コードでは、locationerrorイベントにonLocationError関数を登録しているため

位置情報の取得が失敗した場合に、onLocationError関数が実行され

アラートメッセージ、「現在地を取得できませんでした」が表示されます。

step3(locate)

geo api を実行します。

成功した場合、locationfoundイベントを実行します。

失敗した場合、locationerrorイベントを実行します。

step4(https)

locateを使用する位置情報の取得は、httpsの環境でしか動作しないブラウザもあります。

そのため、サイト自体がhttpsであることはもちろん、読み込んでいる外部リソース(例えば地図のタイル情報の読み込み先URL)もhttpsである必要があります。

httpsではない場合、位置情報の取得に失敗します。

次回はマップ表示時ではなく、「現在地を取得」ボタンを押した際に位置情報を取得してみたいと思います。

スポンサーリンク

シェアする

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

フォローする