内容へ移動
あちあち情報局
趣味や日曜プログラムなどを書いています
ユーザ用ツール
ログイン
サイト用ツール
検索
ツール
文書の表示
以前のリビジョン
バックリンク
最近の変更
メディアマネージャー
サイトマップ
ログイン
>
最近の変更
メディアマネージャー
サイトマップ
現在位置:
トップページ
»
🌏Leaflet(マップAPI)
»
Leaflet マーカークリックイベント
leaflet:clickevent
この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
~~NOCACHE~~ [[:programming_start]] ====== Leaflet マーカークリックイベント ====== Leaflet 1系を使用してマーカークリック時にポップアップ表示以外の任意のイベントを発火させる方法。 注意:「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」 ---- ===== デモ ===== 通常ではマーカーをクリックした時にポップアップが表示されますが、それ以外の任意のイベントを発生します。ここではマーカーをクリックするとポップアップを開かず(※)にアラートダイアログに都道府県名と都道府県番号が表示します。(※コードを書き換えればポップアップ表示も同時に使用できます) <html> <div id="mapid" style="width: 100%; height: 400px;"></div> <script src="https://www.achiachi.net/blog/_outside/leaflet/134/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://www.achiachi.net/blog/_outside/leaflet/134/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://c.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</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> </html> <html> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- respon_0 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-9251612436023685" data-ad-slot="1409739163" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </html> ---- ===== ソースコード ===== <code javascript> <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 © <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> </code> ---- ===== 説明 ===== 基本的な部分は[[marker]]と同じです。 マーカー情報をマップ外から使用するためのグローバル変数を用意。 <code javascript> var markers=[]; </code> L.markerにon( 'click', callback)でクリック時に実行する関数(clickEvt())を登録 <code javascript> 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); }); </code> クリック時に利用するデータを登録。ここでは都道府県コードと都道府県名を登録しています。 <code javascript> markers[0].code = 13; markers[0].title = '東京都'; </code> クリック時実行する関数本体。上記で登録したデータを「e.target.名前」で取り出せます。 <code javascript> function clickEvt(e){ alert( e.target.title + " の都道府県コード= "+ e.target.code ); //alert( 東京都 + " の都道府県コード= "+ 13 ); } </code> <html> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- respon_0 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-9251612436023685" data-ad-slot="1409739163" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </html> ---- ===== おまけ ===== クリック時にポップアップも表示したい場合L.markerに ''bindPopup()'' を追加して下さい <code javascript> markers[0] = L.marker([ 35.6896,139.6918 ]).addTo(mymap).bindPopup('東京都').on( 'click', function(e) { clickEvt(e); }); </code> クリックイベント時にマーカー座標を使いたい場合は ''e.latlng'' で使用できます。 <code javascript> function clickEvt(e){ alert( e.latlng ); //↓コメント解除すればマーカーをセンターに移動できます //mymap.panTo(e.latlng); } </code>
leaflet/clickevent.txt
· 最終更新: 2018/09/11 13:24 by
管理者
ページ用ツール
文書の表示
以前のリビジョン
バックリンク
文書の先頭へ