内容へ移動
あちあち情報局
趣味や日曜プログラムなどを書いています
ユーザ用ツール
ログイン
サイト用ツール
検索
ツール
文書の表示
以前のリビジョン
バックリンク
最近の変更
メディアマネージャー
サイトマップ
ログイン
>
最近の変更
メディアマネージャー
サイトマップ
現在位置:
トップページ
»
🌏Leaflet(マップAPI)
»
Leaflet 全マーカーを画面内に収める
leaflet:autocenter
この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
~~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 © <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 © <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>
leaflet/autocenter.txt
· 最終更新: 2018/09/12 13:52 by
管理者
ページ用ツール
文書の表示
以前のリビジョン
バックリンク
文書の先頭へ