Leaflet入門６｜地図に現在地を表示する２

前回（Leaflet入門５）の方法では、ブラウザでマップを表示した際に、現在地情報を取得しました。

今回は、よくある「現在地を取得」のようなボタンが押された際に、位置情報を取得してみたいと思います。

Demoはこちらです。

１．全体のコード

<!DOCTYPE html>
<html>
  <head>
    <title>Leaflet Demo6</title>
  	<meta charset="utf-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="">
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
    <style type="text/css">
     <!--
      #mapid { height: 400px; width: 600px}
      #btnCurLocation { height:50px; width: 150px;}
    -->
    </style>
  </head>
  <body>
    <div id="mapid"></div>
    <button id="btnCurLocation" onClick="setCurLocation()">現在地を表示</button>

    <script>
      var mymap = L.map('mapid').setView([35.7102, 139.8132], 15);

      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      	maxZoom: 18,
      	attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '
      }).addTo(mymap);

      function setCurLocation(){
        if (navigator.geolocation == false){
          alert('現在地を取得できませんでした。');
          return;
        }

        function success(e) {
          var lat  = e.coords.latitude;
          var lng = e.coords.longitude;
          mymap.setView([lat, lng], 15);
          L.marker([lat,lng]).addTo(mymap).bindPopup('現在地').openPopup();
        };

        function error() {
          alert('現在地を取得できませんでした。');
        };

        navigator.geolocation.getCurrentPosition(success, error);
      }
    </script>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Leaflet Demo6</title>

<!--

#mapid { height: 400px; width: 600px}

#btnCurLocation { height:50px; width: 150px;}

-->

</style>

</head>

<body>

<button id="btnCurLocation" onClick="setCurLocation()">現在地を表示</button>

var mymap = L.map('mapid').setView([35.7102, 139.8132], 15);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

maxZoom: 18,

attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '

}).addTo(mymap);

function setCurLocation(){

if (navigator.geolocation == false){

alert('現在地を取得できませんでした。');

return;

}

function success(e) {

var lat = e.coords.latitude;

var lng = e.coords.longitude;

mymap.setView([lat, lng], 15);

L.marker([lat,lng]).addTo(mymap).bindPopup('現在地').openPopup();

};

function error() {

alert('現在地を取得できませんでした。');

};

navigator.geolocation.getCurrentPosition(success, error);

}

</script>

</body>

</html>

２．解説

地図を描画するまでの解説は、leaflet入門1に記載しています。

２−１．Geolocation

前回は、leafletの「locate」を使用しましたが、今回はGeolocation API により現在地を取得します。

Geolocation APIの使用方法ですが、前回の「locate」と同じように

位置情報の取得が成功した場合（success）、失敗した場合（error）の処理をそれぞれ指定します。

function success(e) {
  var lat  = e.coords.latitude;
  var lng = e.coords.longitude;
  mymap.setView([lat, lng], 15);
  L.marker([lat,lng]).addTo(mymap).bindPopup('現在地').openPopup();
};

function error() {
  alert('現在地を取得できませんでした。');
};

function success(e) {

var lat = e.coords.latitude;

var lng = e.coords.longitude;

mymap.setView([lat, lng], 15);

L.marker([lat,lng]).addTo(mymap).bindPopup('現在地').openPopup();

};

function error() {

alert('現在地を取得できませんでした。');

};

successでは、取得した現在地を使用して、現在地にマーカーを設定しています。

・setViewで地図を現在地に移動

・L.markerでマーカーを設定

という流れです。

errorでは、アラートメッセージを表示しています。

２−２．getCurrentPosition

この関数で（navigator.geolocation.getCurrentPosition ）、現在地の取得を行います。

現在地の取得は、非同期で行われ取得後の処理は、コールバック関数（ここでは、success関数もしくは error関数）が呼び出されます。

navigator.geolocation.getCurrentPosition(success, error);

1	navigator.geolocation.getCurrentPosition(success, error);

次回は、現在地のアイコンをGoogle Map風に変更したいと思います。

Elmからportを通してleaflet .jsを操る | IT技術情報局より:

2018年4月16日 11:52 PM

[…] 地図を表示します。ElmとのインターフェースであるPortを使います。JavaScriptコードにつきましては以下のサイトを参考にさせていただきました。 leaflet入門６｜地図に現在地を表示する２ […]

返信
Elmでつくるgeolocationの発信機・受信機 | IT技術情報局より:

2018年4月26日 9:51 PM

[…] 地図を表示します。ElmとのインターフェースであるPortを使います。JavaScriptコードにつきましては以下のサイトを参考にさせていただきました。 leaflet入門６｜地図に現在地を表示する２ […]

返信