leaflet入門4|地図にマーカーを表示する

leaflet(1.3)を使ってマップにマーカーを表示します。

地図にお店の位置などを表示する際によく利用すると思います。

Demoはこちらです。

全体のコード

 解説

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

step1(L.marker)

マーカーを表示する場合は、L.marker を使用します。

表示する緯度経度を指定するだけでマーカーが表示できます。

step2(popupの表示:bindPopup)

マーカーを立てるだけでは、そのマーカが何を示しているのかが分かりにくいため、

マーカをクリック(タップ)した場合に、ポップアップを表示して追加の情報を表示します。

marker.bindPopup でポップアップに表示する内容を指定します。

htmlのタグを使用できるため、比較的自由にメッセージのスタイルを指定することができます。

ただし、この指定の場合、地図表示時に一緒にポップアップも表示されます。

step3(popupの表示:イベント)

次は、マーカーをクリック(タップ)した場合のみ、ポップアップを表示する方法です。

クリック(タップ)した場合のみ表示するには、マーカーとクリックイベントを紐つける必要があります。

まず、クリックイベントが発生した際に実行する関数(上記の例では、function onMarker2Click(e))を定義します。

次に、クリックイベントと、実行する関数を紐つけます。

mymap.on(‘click’, onMarker2Click);

これだけで、クリック(タップ)した場合のみ、ポップアップを表示できるようになります。

また、イベントはクリック以外にもあり、詳細はこちらから参照することができます。

次回は地図に現在地を表示したいと思います。

スポンサーリンク

シェアする

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

フォローする