Newer
Older
2021-kodama / map / gps / gps-chase.js
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);

   var image1 = "<h1>公益ホール</h1>";
   var popup1 = L.popup({ maxWidth: 450 }).setContent(image1);
	let a = L.marker([38.879230,139.847138]).bindPopup(popup1).addTo(mymap);
	a = L.latLng(38.892325, 139.819474);
	
  var image2 = "<h1>教務学生課</h1>";
   var popup2 = L.popup({ maxWidth: 450 }).setContent(image2);
	let b = L.marker([38.893690, 139.819490]).bindPopup(popup2).addTo(mymap);
	b = L.latLng(38.893690, 139.819490);
	
   var image3 = "<h1>学生棟</h1>";
   var popup3 = L.popup({ maxWidth: 450 }).setContent(image3);
	let c = L.marker([38.892972, 139.818900]).bindPopup(popup3).addTo(mymap);
	c = L.latLng(38.892972, 139.818900);
	
   var image4 = "<h1>学生棟</h1>";
   var popup4 = L.popup({ maxWidth: 450 }).setContent(image4);
	let d = L.marker([38.894329, 139.819570]).bindPopup(popup4).addTo(mymap);
	d = L.latLng(38.894329, 139.819570);

    var nTrial = 100
    var watchId = null;		// 最初はnullにしておく
    function stopGPS() {	// watchが動いていたら止めてnullにする
	console.log("watchId="+watchId);
	if (watchId != null) {	// nullかどうかで比較しないとだめ(初期値0)
	    navigator.geolocation.clearWatch(watchId);
	    document.getElementById("title").textContent = "stop";
	    gpsmarker.setPopupContent("問題だよ!");
	}
	watchId = null;
    }
    function tryWatchGPS() {
	stopGPS();		// 二重で動かないように注意する
	watchId = navigator.geolocation.watchPosition(
	    onSuccess, onError,{
		maximumAge: 0, timeout: 3000, enableHighAccuracy: true});
	document.getElementById("title").textContent = "START!!";
    }
    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();
	var qs1 = "<h1>問題です!</h1><h2>サンプル<h2>";
	var popup1 = L.popup({ maxWidth: 450 }).setContent(qs1);
	var x = latlng.lat, y = latlng.lng;
	var latlng1 = L.latLng([38.879232, 139.853824]);
	var latlng2 = L.latLng([38.893690, 139.819490]);
	var latlng3 = L.latLng([38.892972, 139.818900]);
	var latlng4 = L.latLng([38.894329, 139.819570]);
	//console.log(latlng.distanceTo(latlng2));
	
	if(latlng.distanceTo(latlng1) < 50){
	alert("問題です!鳥海山の標高何mでしょうか?");
	stopGPS();
	
	}else if (latlng.distanceTo(latlng2) < 50){
	alert("問題です!東北公益文科大学の創立は何年でしょうか?(数字のみ入力してください)");
	stopGPS();
	
	}else if (latlng.distanceTo(latlng3) < 50){
	alert("問題です!東北公益文科大学は私立大学です。〇か☓か");
	stopGPS();
	
	}else if(latlng.distanceTo(latlng4) < 50){
	alert("問題です!飯盛山の標高何mでしょうか?");
	stopGPS();
	}
    }
    
    function checkButton(){
    answer = document.getElementById( "mytext" ).value ;
    //msg.innerText = '解答しました'
     if(38.879230,139.847138){
	if(answer == 2236){
		alert("正解です");
	}else{
		alert("不正解です");
	}
     }else if(38.893690, 139.819490){
     	if(answer == 2001){
		alert("正解です");
	}else{
		alert("不正解です");
	}
     }else if(38.892972, 139.818900){
     	if(answer == 〇){
		alert("正解です");
	}else{
		alert("不正解です");
	}
     }else if(38.894329, 139.819570){
     	if(answer == 1643){
		alert("正解です");
	}else{
		alert("不正解です");
	}
     }
    }
    
    function onError(err) {
	restN = "あと"+(--nTrial)+"回試行します。";
	gpsmarker.setPopupContent("捕捉失敗:"+restN).openPopup();
	if (nTrial <= 0) {
	    navigator.geolocation.clearWatch(watchId);
	}
    }
    document.getElementById("checkButton").addEventListener("click", checkButton);
    // STARTボタンに開始を仕込む
    document.getElementById("start").addEventListener("click", tryWatchGPS);
    // STOPボタンに停止を仕込む
    document.getElementById("stop").addEventListener("click", stopGPS);
}, false);