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

緯度
経度
倍率

---- ===== ソースコード ===== コメント行のある部分が[[map]]から追加された部分です。 Html部分




緯度 

経度 

倍率

JavaScript部分

---- ===== 説明 ===== マップの基本部分については[[map]]をご覧ください。センタークロスの表示については[[cross]]をご覧ください。 html上に中心座標(緯度・経度)と倍率を表示する要素を準備します。id名をキーとして値が出力されます。input要素とspan要素の2方式に出力していますが不要な項目は後述の関数部分と一緒に削除して下さい。



緯度 

経度 

倍率

地図の中心座標（緯度・経度）と倍率を取得して上記のhtmlに出力する関数。input要素とspan要素の2方式に出力していますが不要な項目は削除して下さい。


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;   //倍率
}

上記関数を実行するの部分は下記の2個所、で1つめは ''setView'' の直後に記述しマップが表示された最初に情報を表示します（記述しないと最初の情報が表示されません）。2つめはムーブイベント内に記述して地図が動くたびに情報を書き換えます。


//mymap.setView([35.6896, 139.6918], 9); //の後に記述
outputPos(mymap);


//mymap.on('move', function(e) {  //マップムーブイベント内に記述
  outputPos(mymap);
//});

===== おまけ1 ===== 表示エリアの左上や右下の座標を取得したい場合は。


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にタグが必要

北東の端と南西の端を取得したい場合は下記を使う。


//var pos=bounds.getNorthEast();　//北端と東端なら
//var pos=bounds.getSouthWest();　//南端と西端なら

===== おまけ2 ===== 緯度経度の少数以下の桁数が多すぎる場合には下記のように ''Math.floor'' などで切り下げすると良いです。下記の場合は少数4桁まで表示します。(※切り捨てのparseInt()は遅いらしい)


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;