Leaflet マーカークリックイベント

Leaflet 1系を使用してマーカークリック時にポップアップ表示以外の任意のイベントを発火させる方法。

注意：「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」

通常ではマーカーをクリックした時にポップアップが表示されますが、それ以外の任意のイベントを発生します。ここではマーカーをクリックするとポップアップを開かず(※)にアラートダイアログに都道府県名と都道府県番号が表示します。（※コードを書き換えればポップアップ表示も同時に使用できます）

<div id="mapid" style="width: 100%; height: 400px;"></div>
<script src="https://【自分のサーバーアドレスとパス】/leaflet/v1/leaflet.js"></script>
<script>
  /* 外部CSSの読み込み用 */
  function cssLoad(cssFile){
    if(document.all){
      document.createStyleSheet(cssFile);
    }else{
      var link = document.createElement("link");
      link.rel = "stylesheet";
      link.href = cssFile;
      link.type = "text/css"
      document.getElementsByTagName('head')[0].appendChild(link);
    }
  }
  cssLoad("https://【自分のサーバーアドレスとパス】/leaflet/v1/leaflet.css");
  function addOnload(evtFunc){
    if(window.addEventListener) {
      window.addEventListener('load', evtFunc, false);
    } else if(window.attachEvent){ //IE用
      window.attachEvent('onload', evtFunc);
    } else {
      //alert('window.onload エラー');
    }
  }
 
 
  //マーカー情報保持
  var markers=[];
 
 
  var mymap;
  addOnload(function(){
    mymap = L.map('mapid'); 
    L.tileLayer('https://【タイルサーバーのアドレスとパス】/{z}/{x}/{y}.png', {
      maxZoom: 18,
      attribution: 'Map data &copy; <a href="【タイルサーバーの著作権アドレス】" target="_blank">【タイルサーバーの著作者】</a> contributors, '
    }).addTo(mymap);
 
 
    //.on('click' callback)でクリックイベントの関数を登録
    markers[0] = L.marker([ 35.6896,139.6918 ]).addTo(mymap).on( 'click', function(e) {  clickEvt(e); });
    //ここでクリックイベント時に使用したいデータを登録
    markers[0].code = 13;
    markers[0].title = '東京都';
    //次のデータ
    markers[1] = L.marker([ 35.6050,140.1234 ]).addTo(mymap).on( 'click', function(e) {  clickEvt(e); });
    markers[1].code = 12;
    markers[1].title = '千葉県';  
    //次のデータ
    markers[2] = L.marker([35.8572,139.6490 ]).addTo(mymap).on( 'click', function(e) {  clickEvt(e); });
    markers[2].code = 11;
    markers[2].title = '埼玉県';  
 
 
    mymap.setView([35.6896, 139.6918], 9);
  });
 
  //クリックイベントで発火する関数
  function clickEvt(e){
    alert( e.target.title + " の都道府県コード＝ "+ e.target.code );
  }
 
</script>

基本的な部分はLeaflet マーカーとポップアップ表示と同じです。

マーカー情報をマップ外から使用するためのグローバル変数を用意。

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);
}