内容へ移動
あちあち情報局
趣味や日曜プログラムなどを書いています
ユーザ用ツール
ログイン
サイト用ツール
検索
ツール
文書の表示
以前のリビジョン
バックリンク
最近の変更
メディアマネージャー
サイトマップ
ログイン
>
最近の変更
メディアマネージャー
サイトマップ
現在位置:
トップページ
»
🌏Leaflet(マップAPI)
»
Leaflet マーカーとポップアップ表示
leaflet:marker
この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
[[:programming_start]] ====== Leaflet マーカーとポップアップ表示 ====== Leaflet v1系を使用してマーカーとポップアップ(情報ウインドウ・バルーン)を表示します。 注意:「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」 ---- ===== デモ ===== マーカーを3つ表示します。マーカーをクリックと吹き出し(ポップアップ)に都道府県名が表示されます。 <html> <div id="mapid" style="width: 100%; height: 400px;"></div> <script src="https://www.achiachi.net/blog/_outside/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://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 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); L.marker([35.6896, 139.6918]).addTo(mymap).bindPopup("東京都"); L.marker([35.6050, 140.1234]).addTo(mymap).bindPopup("千葉県"); L.marker([35.8572, 139.6490]).addTo(mymap).bindPopup("埼玉県"); mymap.setView([35.6896, 139.6918], 9); }); </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> 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 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); //マーカー表示 L.marker([35.6896, 139.6918]).addTo(mymap).bindPopup("東京都"); L.marker([35.6050, 140.1234]).addTo(mymap).bindPopup("千葉県"); L.marker([35.8572, 139.6490]).addTo(mymap).bindPopup("埼玉県"); mymap.setView([35.6896, 139.6918], 9); }); </script> </code> ---- ===== 説明 ===== マップの基本部分は[[map]]をご覧ください。 マーカーを表示するには、L.markerに、緯度・経度・表示するマップ・ポップアップの内容を登録します。何個でも追加できます。 <code javascript> L.marker([35.6896, 139.6918]).addTo(mymap).bindPopup("東京都"); //L.marker([ 緯度,経度 ]).addTo(マップ変数).bindPopup(ポップアップ表示内容); </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> ---- ===== おまけ ===== 1.ポップアップが不要な場合は ''bindPopup()'' を削除します。 <code javascript> L.marker([35.6896, 139.6918]).addTo(mymap); //L.marker([ 緯度,経度 ]).addTo(マップ変数); </code> 2.表示した際にポップアップを開いた状態にする場合は、**setViewより後で** openPopup() オプションを付けて記述して下さい。 openPopupの注意 * setViewより前にあると無視されます * 地図の座標が自動的にポップアップが見える位置まで自動で移動するのでsetViewの座標設定は無視されます。 * ポップアップをは1つだけしか表示できないので複数使用した場合は最後に指定したものが表示されます。 <code javascript> L.marker([35.6050, 140.1234]).addTo(mymap).bindPopup("千葉県"); L.marker([35.8572, 139.6490]).addTo(mymap).bindPopup("埼玉県"); mymap.setView([35.6896, 139.6918], 9); L.marker([35.6896, 139.6918]).addTo(mymap).bindPopup("東京都").openPopup(); </code>
leaflet/marker.txt
· 最終更新: 2018/09/11 13:30 by
管理者
ページ用ツール
文書の表示
以前のリビジョン
バックリンク
文書の先頭へ