内容へ移動
あちあち情報局
趣味や日曜プログラムなどを書いています
ユーザ用ツール
ログイン
サイト用ツール
検索
ツール
文書の表示
以前のリビジョン
バックリンク
最近の変更
メディアマネージャー
サイトマップ
ログイン
>
最近の変更
メディアマネージャー
サイトマップ
現在位置:
トップページ
»
🌏Leaflet(マップAPI)
»
Leaflet 外部からポップアップを開く
leaflet:popup
この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
[[:programming_start]] ====== Leaflet 外部からポップアップを開く ====== Leaflet 1系を使用してマーカのポップアップを外部からオープンします。 注意:「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」 ===== デモ ===== 地図下部のリンクをクリックするとポップアップが開きます。 <html> <div id="mapid" style="width: 100%; height: 400px;"></div> <p> <a href="#mapid" onclick="popupOn(0);">【東京都】</a> <a href="#mapid" onclick="popupOn(1);">【千葉県】</a> <a href="#mapid" onclick="popupOn(2);">【埼玉県】</a> </p> <script src="https://www.achiachi.net/blog/_outside/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://www.achiachi.net/blog/_outside/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://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); markers[0]=L.marker([35.6896, 139.6918]).addTo(mymap).bindPopup("東京都"); markers[1]=L.marker([35.6050, 140.1234]).addTo(mymap).bindPopup("千葉県"); markers[2]=L.marker([35.8572, 139.6490]).addTo(mymap).bindPopup("埼玉県"); mymap.setView([35.6896, 139.6918], 9); }); //ポップアップを開きます function popupOn(id){ //var latlng=markers[id].getLatLng(); //mymap.panTo(latlng); markers[id].openPopup(); } </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> <!-- 外部からポップアップを開くためのリンク --> <p> <a href="#mapid" onclick="popupOn(0);">【東京都】</a> <a href="#mapid" onclick="popupOn(1);">【千葉県】</a> <a href="#mapid" onclick="popupOn(2);">【埼玉県】</a> </p> <script src="https://【自分のサーバーアドレスとパス】/leaflet/v1/leaflet.js"></script> <script> 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); //マーカー情報を配列に保持する markers[0]=L.marker([35.6896, 139.6918]).addTo(mymap).bindPopup("東京都"); markers[1]=L.marker([35.6050, 140.1234]).addTo(mymap).bindPopup("千葉県"); markers[2]=L.marker([35.8572, 139.6490]).addTo(mymap).bindPopup("埼玉県"); mymap.setView([35.6896, 139.6918], 9); }); //ポップアップを開く関数 function popupOn(id){ markers[id].openPopup(); } </script> </code> ---- ===== 備考 ===== 基本的な部分は[[leaflet:marker]]と同じです。 マーカー情報をマップ外から使用するためのグローバル変数を用意。 <code javascript> var markers=[]; </code> マーカーの設定を上記で準備したグローバル変数に登録。 <code javascript> markers[0]=L.marker([35.6896, 139.6918]).addTo(mymap).bindPopup("東京都"); markers[1]=L.marker([35.6050, 140.1234]).addTo(mymap).bindPopup("千葉県"); markers[2]=L.marker([35.8572, 139.6490]).addTo(mymap).bindPopup("埼玉県"); </code> マップ外からポップアップを開くためのJavaScript関数。''openPopup()'' でポップアップが開きます。 <code javascript> function popupOn(id){ markers[id].openPopup(); } </code> HTMLにポップアップを開くためのリンクを設置。popupOn()の数字はmarkers[]の配列番号と連動しています。 <code html> <a href="#mapid" onclick="popupOn(0);">【東京都】</a> <a href="#mapid" onclick="popupOn(1);">【千葉県】</a> <a href="#mapid" onclick="popupOn(2);">【埼玉県】</a> </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> ---- ===== おまけ ===== マーカーをセンターに表示したい場合はfunction popupOn()を下記のようにします。(注意:マップが小さくポップアップが画面外にはみ出る場合はpanToとopenPopupの順番が動作に影響します。下記の順番ではポップアップが画面外に出てもマーカーがセンターに来ます。逆にpanTo→openPopupの順にするとポップアップが表示領域にできるだけ収まるように表示されます) <code javascript> function popupOn(id){ var latlng=markers[id].getLatLng(); markers[id].openPopup(); //↑↓順番を変えると動作が少し変わります mymap.panTo(latlng); } </code>
leaflet/popup.txt
· 最終更新: 2018/09/11 11:29 by
管理者
ページ用ツール
文書の表示
以前のリビジョン
バックリンク
文書の先頭へ