Newer
Older
ryuei / map / game / game.js
@Ryuei Ryuei on 27 Jan 2023 3 KB fix code
document.addEventListener("DOMContentLoaded", () => {
    var mymap = L.map("gpsmap").setView([38.891, 139.824], 16);
    L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution:
        '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> \
            contributors'
    }).addTo(mymap);

    L.control.scale({position: 'topleft'}).addTo(mymap);

    var gpsmarker = L.marker(mymap.getCenter()).addTo(mymap);
    gpsmarker.bindPopup("「start」を押して計測開始").openPopup();
    console.log(gpsmarker);

    var nTrial = 100
    var watchId = null;// 最初はnullにしておく
    var x1,x2,y1,y2 = 0;
    var all = 0;
    const r = Math.PI / 180;   //Math.PIは円周と直径の比率およそ「3.14159」を表す


    function stopGPS() {	// watchが動いていたら止めてnullにする
        console.log("watchId="+watchId);
        if (watchId != null) {	// nullかどうかで比較しないとだめ(初期値0)
            navigator.geolocation.clearWatch(watchId);
            document.getElementById("timer").textContent = "計測を停止したよ";
            gpsmarker.setPopupContent("「stop」が押されたため計測を停止しました。");
        }
        watchId = null;
    }

    function tryWatchGPS() {
	stopGPS();		// 二重で動かないように注意する
	watchId = navigator.geolocation.watchPosition(
	    onSuccess, onError,{
		maximumAge: 0, timeout: 3000, enableHighAccuracy: true});
	document.getElementById("timer").textContent = "Let's walking!";
    }


    function onSuccess(pos) {	// GPS信号が取れたらここに来る
	var latlng = L.latLng([pos.coords.latitude, pos.coords.longitude]);
	mymap.panTo(latlng);// 地図の中心をそこにする
	console.log(latlng);
	gpsmarker.setLatLng(latlng).setPopupContent(
	    "ここは lat="+latlng.lat+", lng="+latlng.lng+" です."
	).openPopup();
    x1 = latlng.lat, y1 = latlng.lng;
    }

    function nowGPS(){
        stopGPS();		// 二重で動かないように注意する
        watchId = navigator.geolocation.watchPosition(
            onGood, onError,{
            maximumAge: 0, timeout: 3000, enableHighAccuracy: true});
        document.getElementById("timer").textContent = "現在地はここ!";
    }

    function onGood(pos) {	// nowGPSでGPS信号が取れたらここに来る
            var latlng = L.latLng([pos.coords.latitude, pos.coords.longitude]);
            mymap.panTo(latlng);// 地図の中心をそこにする
            console.log(latlng);
            gpsmarker.setLatLng(latlng).setPopupContent(
                "現在地の座標は lat="+latlng.lat+", lng="+latlng.lng+" です."
            ).openPopup();
            x2 = latlng.lat,y2 = latlng.lng;
            distance(x1, y1, x2, y2);
        }

    function onError(err) {
        restN = "あと"+(--nTrial)+"回試行します。";
        gpsmarker.setPopupContent("捕捉失敗:"+restN).openPopup();
        if (nTrial <= 0) {
            navigator.geolocation.clearWatch(watchId);
        }
    }

    function result(){
        function distance(x1, y1, x2, y2) {
            x1 *= r;//乗算代入
            y1 *= r;
            x2 *= r;
            y2 *= r;
        var dis = (6371 * Math.acos(Math.cos(x1) * Math.cos(x2) * Math.cos(y2 - y1) + Math.sin(x1) * Math.sin(x2)))*1000;
        //地球を半径6,371kmの球体としたときの計算。Google mapと同じ計算...らしい
        all += Math.floor(dis * 10) / 10;
        console.log(all);
        }
        document.getElementById("timer").textContent = "お疲れ^^ どれくらい歩いたかな";
        gpsmarker.setPopupContent("今回の歩行距離は"+all).openPopup();
        watchId = null;
    }

    document.getElementById("start").addEventListener("click", tryWatchGPS);
    document.getElementById("stop").addEventListener("click", stopGPS);
    document.getElementById("now").addEventListener("click", nowGPS);
    document.getElementById("result").addEventListener("click", result);
}, false);