~~NOCACHE~~ [[:programming_start]] ====== Leaflet マーカークリックイベント ====== Leaflet 1系を使用してマーカークリック時にポップアップ表示以外の任意のイベントを発火させる方法。注意：「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」 ---- ===== デモ ===== 通常ではマーカーをクリックした時にポップアップが表示されますが、それ以外の任意のイベントを発生します。ここではマーカーをクリックするとポップアップを開かず(※)にアラートダイアログに都道府県名と都道府県番号が表示します。（※コードを書き換えればポップアップ表示も同時に使用できます）

---- ===== ソースコード =====

---- ===== 説明 ===== 基本的な部分は[[marker]]と同じです。マーカー情報をマップ外から使用するためのグローバル変数を用意。


var markers=[];

L.markerにon( 'click', callback)でクリック時に実行する関数(clickEvt())を登録


markers[0] = L.marker([ 35.6896,139.6918 ]).addTo(mymap).on( 'click', function(e) {  clickEvt(e); });
//markers[i] = L.marker([ 緯度,経度 ]).addTo(マップ変数).on( 'click', function(e) { クリック関数(e); });

クリック時に利用するデータを登録。ここでは都道府県コードと都道府県名を登録しています。


markers[0].code = 13;
markers[0].title = '東京都';

クリック時実行する関数本体。上記で登録したデータを「e.target.名前」で取り出せます。


function clickEvt(e){
  alert( e.target.title + " の都道府県コード＝ "+ e.target.code );
  //alert( 東京都 + " の都道府県コード＝ "+ 13 );
}

---- ===== おまけ ===== クリック時にポップアップも表示したい場合L.markerに ''bindPopup()'' を追加して下さい


markers[0] = L.marker([ 35.6896,139.6918 ]).addTo(mymap).bindPopup('東京都').on( 'click', function(e) { clickEvt(e); });

クリックイベント時にマーカー座標を使いたい場合は ''e.latlng'' で使用できます。


function clickEvt(e){
  alert( e.latlng );
  //↓コメント解除すればマーカーをセンターに移動できます
  //mymap.panTo(e.latlng);
}