// 地図を作成する
var mymap = L.map('map');

// タイルレイヤーを作成し、地図にセットする
L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
  maxZoom: 18,
  attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>',
}).addTo(mymap);

// 地図の中心座標とズームレベルを設定する
mymap.setView([38.89301636348851, 139.81848170763666], 14);

// マーカーを作成する
var marker = L.marker([38.892970547412325, 139.81921451302287]).addTo(mymap);

// クリックした際にポップアップメッセージを表示する
marker.bindPopup("表示");

//ボタンを押したときに起動させる
var btn1  = document.querySelector("#b1");
btn1.addEventListener("click", ()=>{
//navigator.geolocation.watchPosition(成功したときに使う関数名【（）はいらない？（例えばtest2とか）】, 失敗したときに使う関数（）, options]])
  watchID = navigator.geolocation.watchPosition(function (pos){
    var location = "<li>" + "緯度：" + pos.coords.latitude + "</li>";
        location += "<li>" + "経度：" + pos.coords.longitude + "</li>";
        document.getElementById("location").innerHTML = location;
        var Myplace = L.marker([pos.coords.latitude, pos.coords.longitude]).addTo(mymap);},
        function(e) { alert(e.message); },{"enableHighAccuracy": true, "timeout": 20000, "maximumAge": 2000});
});

var btn2  = document.querySelector("#b2");
btn2.addEventListener("click", ()=>{
 navigator.geolocation.clearWatch(watchID);
 alert("停止しました");
});