差分

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

--- leaflet:popup [2018/09/11 11:24] – 管理者
+++ leaflet:popup [2018/09/11 11:29] (現在) – [備考] 管理者
@@ 行 1: / 行 1: @@
+[[: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 &copy; <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 &copy; <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>