コンテンツへスキップ

leaflet地図

leaflet

現在地点を中心に表示する。

クリックした地点にピンを立てる。

実物はここをクリック。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Leaflet</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
  <script>
    window.addEventListener("load",function(){
        //位置情報の取得
        navigator.geolocation.getCurrentPosition(
            function(position){
                console.log(position);
                var lat = position.coords.latitude;
                var lon = position.coords.longitude;
                var disp = document.getElementById("disp");
                disp.innerHTML = "緯度" + lat + "度 / 経度:" + lon + "度";

                //leaflet
                var map = L.map('jmap');
                map.setView([lat, lon], 15);
                L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
                    attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
                }).addTo(map);

                //クリックした位置にピンを立てる
                map.on('click', function(e){
                    //alert(e.latlng);
                    L.marker(e.latlng).addTo( map);
                    //var html = '<p>ここの緯度経度=' + e.latlng + '</p>';
                    //var popup = L.popup()
                    //.setLatLng(e.latlng)
                    //.setContent(html)
                    //.openOn(map);
                    var mdisp = document.getElementById("mdisp");
                    mdisp.innerHTML = e.latlng;
                });



            }
        );
    });


  </script>
</head>

<body onload="init()">
  <div id="jmap" style="width:100%;height:1000px"></div>
  <p>現在地(GPS):
  <div id="disp"></div>
  </p>
  <p>マーク地点:</p>
  <div id="mdisp"></div>
</body>

</html>