leaflet入門|プラグインで現在地マーカーを表示する(UserMarker)

leafletのプラグイン「UserMarker」使用して、現在地にマーカーを表示します。

実装すると以下のようになります。

Demoはこちらです。

Demo1(マーカーの見本)

Demo2(現在地を取得してマーカーを表示)

全体のコード(Demo1)

解説

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

Step1:プラグインの読み込み

UserMarkerの css・js を読み込みます。

UserMarker の本体は GitHubからダウンロードできます。

GitHub-UserMarker

Step2:UserMarkerの設定

L.userMarker オブジェクトを使用します。

L.userMarker(緯度経度, 表示オプション)

オプション

・pulsing:マーカーの波形ON(true)・Off(false)を指定。

・accuracy:精確さ。(単位:メートル)

・smallIcon:小さいアイコンの表示。表示(true)・非表示(false)。

この他にも、オプションがあります。詳細は GitHub-UserMarker を参照してください。

Step3:現在地にマーカーを表示する(Demo2)

Demo2では、ブラウザで現在地を取得しマーカーを表示しました。

抜粋したコードは以下となります。

基本的に地図の表示までは同じで、特有な処理は

・ブラウザから現在地を取得する

・現在地の取得が成功 / 失敗 した際の処理を定義する

という流れになります。

【Demo2のscriptタグ内のコード】

現在地の取得

現在地の取得は、「map.locate」を使用するとブラウザから現在地を取得することができます。

現在地の取得に成功

現在地が取得できた場合は、以下の関数 map.on(“locationfound”)が呼び出されます。

呼び出し引数に、現在地のロケーション情報が格納されているため、ここでは「location.latlng」で現在地の緯度経度を利用しています。

現在地の取得に失敗

現在地の取得に失敗するケース(ブラウザで許可されなかったなど)では、以下の関数map.on(‘locationerror’)が呼び出されます。

まとめ

UserMarker を使用して現在地の取得・マーカーを表示しました。

UserMarker の特徴は、綺麗な青色のマーカーが表示できる点でしょうか。

同じようなプラグイン「icon-pulse」では、マーカーの色や波形の表示間隔を自由に変更することができます。

なので、綺麗なマーカーを使用したい場合は、UserMarker がオススメです。

スポンサーリンク

シェアする

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

フォローする