差分

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

--- leaflet:autocenter [2018/09/12 13:43] – [ソースコード] 管理者
+++ leaflet:autocenter [2018/09/12 13:52] (現在) – [Leaflet 全マーカーを画面内に収める(下書)] 管理者
@@ 行 1: / 行 1: @@
+~~NOCACHE~~
+[[:programming_start]]
+====== Leaflet 全マーカーを画面内に収める ======
+全てのマーカーが画面内に収まるように座標とズームを自動調整して表示します。
+注意：「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」
+----
+===== デモ =====
+表示した時にマーカーが画面内に収まるように座標とズームが自動調整されます。（PCならブラウザの幅を大きくしたり小さくした後に再表示すると画面内にマーカーが収まるようなズーム値になっているのがわかると思います）
+<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);
+    //マーカーをグループ化する変数を準備
+    iconMarkers = L.featureGroup();
+    //アイコンマーカーをiconMarkersグループに登録
+    iconMarkers.addLayer( L.marker([35.6896, 139.6918]).bindPopup("東京都(icon)") );
+    iconMarkers.addLayer( L.marker([35.6050, 140.1234]).bindPopup("千葉県(icon)") );
+    iconMarkers.addLayer( L.marker([35.8572, 139.6490]).bindPopup("埼玉県(icon)") );
+    //地図に表示
+    iconMarkers.addTo(mymap);
+    //削除→mymap.setView([35.6896, 139.6918], 9);
+    //グループが全て収まる座標とズームで表示
+    mymap.fitBounds(iconMarkers.getBounds());
+  });
+</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>
+----
+===== ソースコード =====
+主にコメント行がある部分が[[map]]からの変更部分です。
+html部分
+<code html>
+<div id="mapid" style="width: 100%; height: 400px;"></div>
+</code>
+JavaScript部分
+<code javascript>
+<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);
+    //マーカーをグループ化する変数を準備
+    iconMarkers = L.featureGroup();
+    //アイコンマーカーをiconMarkersグループに登録
+    iconMarkers.addLayer( L.marker([35.6896, 139.6918]).bindPopup("東京都(icon)") );
+    iconMarkers.addLayer( L.marker([35.6050, 140.1234]).bindPopup("千葉県(icon)") );
+    iconMarkers.addLayer( L.marker([35.8572, 139.6490]).bindPopup("埼玉県(icon)") );
+    //マーカーを地図上に表示
+    iconMarkers.addTo(mymap);
+    //削除→mymap.setView([35.6896, 139.6918], 9);
+    //グループが全て収まる座標とズームで表示
+    mymap.fitBounds(iconMarkers.getBounds());
+  });
+</script>
+</code>
+----
+===== 説明 =====
+マップの基本部分については[[map]]をご覧ください。
+マーカーをグループ化する変数を準備します
+<code javascript>
+iconMarkers = L.featureGroup();
+</code>
+マーカーをグループ化します。マーカーについての説明は[[marker]]をご覧ください。
+<code javascript>
+iconMarkers.addLayer( L.marker([35.6896, 139.6918]).bindPopup("東京都(icon)") );
+iconMarkers.addLayer( L.marker([35.6050, 140.1234]).bindPopup("千葉県(icon)") );
+//グループ変数.addLayer( マーカー設定 );
+</code>
+グループ化したマーカーを地図にセット
+<code javascript>
+iconMarkers.addTo(mymap);
+</code>
+''getBounds()''にグループ化したマーカーの北端・南端・西端・東端を抽出して、''fitBounds()''で画面におさまる座標と倍率で地図を表示します。
+<code javascript>
+mymap.fitBounds(iconMarkers.getBounds());
+</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>
+----
+===== おまけ =====
+グループ化を使わなくてもマーカーの北端・南端・西端・東端の緯度経度を手動でセットする事で同じような事ができます。
+<code javascript>
+var bounds = L.latLngBounds([35.8572,139.6918], [35.6050,140.1234]);
+//var bounds = L.latLngBounds([北端緯度,西端経度], [南端緯度,東端経度]);
+//   （※全ての端が分かればよいので、北と南は入れ替わってもよい、西と東は入れ替わってもよいです）
+mymap.fitBounds(bounds);
+</code>