差分

このページの2つのバージョン間の差分を表示します。

--- leaflet:marker [2018/09/11 10:34] – 管理者
+++ leaflet:marker [2018/09/11 13:30] (現在) – [Leaflet マーカーとポップアップ表示] 管理者
@@ 行 1: / 行 1: @@
+[[: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 &copy; <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 &copy; <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>
+----
+===== おまけ =====
+.ポップアップが不要な場合は ''bindPopup()'' を削除します。
+<code javascript>
+L.marker([35.6896, 139.6918]).addTo(mymap);
+//L.marker([ 緯度,経度 ]).addTo(マップ変数);
+</code>
+.表示した際にポップアップを開いた状態にする場合は、**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>