あちあち情報局

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
[[:programming_start]]
====== Leaflet 中心座標とズーム値を取得 ======
Leaflet 1系を使用して地図の中心座標（緯度・経度）とズーム倍率を表示します。

注意：「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」
----
===== デモ =====
地図のズーム変更や位置を移動すると地図上部の緯度・経度・倍率の表示が変化します。input要素とspan要素の2方式で出力しています。

<html>
<p>
緯度<input type="text" id="lat_input" /> <span id="lat_span"></span><br>
経度<input type="text" id="lng_input" /> <span id="lng_span"></span><br>
倍率<input type="text" id="zoom_input" /> <span id="zoom_span"></span><br>
</p>

<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);
  mymap.setView([35.6896, 139.6918], 9);

  outputPos(mymap);
 
  
  var crossIcon = L.icon({
    iconUrl: 'https://www.achiachi.net/blog/_outside/mapicon/gmap_cross.gif',
    iconSize: [32, 32],
    iconAnchor: [16, 16]
  });
  var crossMarker = L.marker( mymap.getCenter(),{icon:crossIcon,zIndexOffset:1000,interactive:false} ).addTo(mymap);

  mymap.on('move', function(e) {
    crossMarker.setLatLng(mymap.getCenter());
    outputPos(mymap);
  });
});

function outputPos(map){
    var pos = map.getCenter();
    var zoom = map.getZoom();
    //spanに出力
    document.getElementById('lat_span').innerHTML = pos.lat;
    document.getElementById('lng_span').innerHTML = pos.lng;
    document.getElementById('zoom_span').innerHTML = zoom;
    //inputに出力
    document.getElementById('lat_input').value = pos.lat;
    document.getElementById('lng_input').value = pos.lng;
    document.getElementById('zoom_input').value = zoom;
}


</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>
<!-- 緯度・経度・倍率をページ上に表示する要素 -->
<p>
緯度<input type="text" id="lat_input" /> <span id="lat_span"></span><br>
経度<input type="text" id="lng_input" /> <span id="lng_span"></span><br>
倍率<input type="text" id="zoom_input" /> <span id="zoom_span"></span><br>
</p>

<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);
  mymap.setView([35.6896, 139.6918], 9);


  //最初の値を出力
  outputPos(mymap); 
  
  var crossIcon = L.icon({ //センタークロス表示用
    iconUrl: 'https://www.achiachi.net/blog/_outside/mapicon/gmap_cross.gif',
    iconSize: [32, 32],
    iconAnchor: [16, 16]
  });
  var crossMarker = L.marker( mymap.getCenter(),{icon:crossIcon,zIndexOffset:1000,interactive:false} ).addTo(mymap);

  //マップムーブイベント
  mymap.on('move', function(e) {
    crossMarker.setLatLng(mymap.getCenter()); //センタークロス表示用

    //マップムーブイベントで値を出力
    outputPos(mymap);
  
  });
});

//現在の緯度・経度・倍率を取得して指定の要素に情報を出力する関数
function outputPos(map){
    var pos = map.getCenter();
    var zoom = map.getZoom();
    //spanに出力
    document.getElementById('lat_span').innerHTML = pos.lat;
    document.getElementById('lng_span').innerHTML = pos.lng;
    document.getElementById('zoom_span').innerHTML = zoom;
    //inputに出力
    document.getElementById('lat_input').value = pos.lat;
    document.getElementById('lng_input').value = pos.lng;
    document.getElementById('zoom_input').value = zoom;
}


</script>
</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>



----
===== 説明 =====
マップの基本部分については[[map]]をご覧ください。

センタークロスの表示については[[cross]]をご覧ください。



html上に中心座標(緯度・経度)と倍率を表示する要素を準備します。id名をキーとして値が出力されます。input要素とspan要素の2方式に出力していますが不要な項目は後述の関数部分と一緒に削除して下さい。

<code html>
<p>
緯度<input type="text" id="lat_input" /> <span id="lat_span"></span><br>
経度<input type="text" id="lng_input" /> <span id="lng_span"></span><br>
倍率<input type="text" id="zoom_input" /> <span id="zoom_span"></span><br>
</p>
</code>


地図の中心座標（緯度・経度）と倍率を取得して上記のhtmlに出力する関数。input要素とspan要素の2方式に出力していますが不要な項目は削除して下さい。
<code javascript>
function outputPos(map){
    var pos = map.getCenter(); //緯度経度を取得
    var zoom = map.getZoom();  //ズーム値を取得
    //spanに出力
    document.getElementById('lat_span').innerHTML = pos.lat; //緯度
    document.getElementById('lng_span').innerHTML = pos.lng; //経度
    document.getElementById('zoom_span').innerHTML = zoom;   //倍率
    //inputに出力
    document.getElementById('lat_input').value = pos.lat; //緯度
    document.getElementById('lng_input').value = pos.lng; //経度
    document.getElementById('zoom_input').value = zoom;   //倍率
}
</code>

上記関数を実行するの部分は下記の2個所、で1つめは ''setView'' の直後に記述しマップが表示された最初に情報を表示します（記述しないと最初の情報が表示されません）。2つめは ムーブイベント内に記述して地図が動くたびに情報を書き換えます。
<code javascript>
//mymap.setView([35.6896, 139.6918], 9); //の後に記述
outputPos(mymap);
</code>
<code javascript>
//mymap.on('move', function(e) {  //マップムーブイベント内に記述
  outputPos(mymap);
//});
</code>

===== おまけ1 =====
表示エリアの左上や右下の座標を取得したい場合は。
<code php>
var bounds = mymap.getBounds();
var posNW=bounds.getNorthWest();　//北端と西端の座標を取得
var posSE=bounds.getSouthEast();　//南端と東端なら
document.getElementById('lat1_span').innerHTML = posNW.lat; //緯度(北端)
document.getElementById('lng1_span').innerHTML = posNW.lng; //経度(西端)
document.getElementById('lat2_span').innerHTML = posSE.lat; //緯度(南端)
document.getElementById('lng2_span').innerHTML = posSE.lng; //経度(東端)
//出力用にid名「lat1_span・lng1_span・lat2_span・lng2_span」を持ったspanにタグが必要
</code>

北東の端と南西の端を取得したい場合は下記を使う。
<code php>
//var pos=bounds.getNorthEast();　//北端と東端なら
//var pos=bounds.getSouthWest();　//南端と西端なら
</code>


===== おまけ2 =====
緯度経度の少数以下の桁数が多すぎる場合には下記のように ''Math.floor'' などで切り下げすると良いです。下記の場合は少数4桁まで表示します。(※切り捨てのparseInt()は遅いらしい)
<code javascript>
document.getElementById('lat_span').innerHTML = Math.floor(pos.lat*10000)/10000;
document.getElementById('lng_span').innerHTML = Math.floor(pos.lng*10000)/10000;

document.getElementById('lat_input').value = Math.floor(pos.lat*10000)/10000;
document.getElementById('lng_input').value = Math.floor(pos.lng*10000)/10000;
</code>