document.addEventListener("DOMContentLoaded", () => {
var mymap = L.map("gpsmap").setView([38.8933, 139.8191], 17); // 中心とズームレベル
L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', { // タイルレイヤーの設定
attribution:
'© <a href="http://osm.org/copyright">OpenStreetMap</a> \
contributors'
}).addTo(mymap);
//円を描く
var cc = [38.89426, 139.81888];
var ccopt = {
radius: 5,
color: "black"
};
var ccobj = L.circle(cc, ccopt).addTo(mymap);
ccobj.bindPopup("201教室");
var cc = [38.89413, 139.81886];
var ccopt = {
radius: 5,
color: "black"
};
var ccobj = L.circle(cc, ccopt).addTo(mymap);
ccobj.bindPopup("202教室");
var cc = [38.89400, 139.81884];
var ccopt = {
radius: 5,
color: "black"
};
var ccobj = L.circle(cc, ccopt).addTo(mymap);
ccobj.bindPopup("203教室");
var cc = [38.89369, 139.81884];
var ccopt = {
radius: 5,
color: "black"
};
var ccobj = L.circle(cc, ccopt).addTo(mymap);
ccobj.bindPopup("204教室");
var cc = [38.89356, 139.81882];
var ccopt = {
radius: 5,
color: "black"
};
var ccobj = L.circle(cc, ccopt).addTo(mymap);
ccobj.bindPopup("205教室");
var cc = [38.89338, 139.81880];
var ccopt = {
radius: 5,
color: "black"
};
var ccobj = L.circle(cc, ccopt).addTo(mymap);
ccobj.bindPopup("206教室");
var cc = [38.89325, 139.81879];
var ccopt = {
radius: 5,
color: "black"
};
var ccobj = L.circle(cc, ccopt).addTo(mymap);
ccobj.bindPopup("207教室");
var cc = [38.89303, 139.81877];
var ccopt = {
radius: 5,
color: "black"
};
var ccobj = L.circle(cc, ccopt).addTo(mymap);
ccobj.bindPopup("208教室");
var cc = [38.89290, 139.81877];
var ccopt = {
radius: 5,
color: "black"
};
var ccobj = L.circle(cc, ccopt).addTo(mymap);
ccobj.bindPopup("209教室");
var cc = [38.89261, 139.81877];
var ccopt = {
radius: 5,
color: "black"
};
var ccobj = L.circle(cc, ccopt).addTo(mymap);
ccobj.bindPopup("210教室");
var cc = [38.89248, 139.81875];
var ccopt = {
radius: 5,
color: "black"
};
var ccobj = L.circle(cc, ccopt).addTo(mymap);
ccobj.bindPopup("211教室");
var cc = [38.89235, 139.81873];
var ccopt = {
radius: 5,
color: "black"
};
var ccobj = L.circle(cc, ccopt).addTo(mymap);
ccobj.bindPopup("212教室");
var gpsmarker = L.marker(mymap.getCenter(), {draggable: true}).addTo(mymap);
gpsmarker.bindPopup("STARTを押してね").openPopup();
gpsmarker.on('dragend', function(e) { // マーカーをドラッグさせる
var latlng = e.target.getLatLng();
e.target.setPopupContent("この位置は"+latlng+"です。");
// 画像の切り替え
if ((latlng.lat >= 38.894081 && latlng.lat <= 38.894173) && (latlng.lng >= 139.818792 && latlng.lng <= 139.818910)) {
document.getElementById("nazo_ttl").textContent = "202の謎";
document.getElementById("nazo_img").setAttribute("src", "image/nazo1.png");
document.getElementById("result").innerHTML = " ";
document.getElementById("answer").innerHTML = "さかた";
} else if ((latlng.lat >= 38.893642 && latlng.lat <= 38.893734) && (latlng.lng >= 139.818776 && latlng.lng <= 139.818894)) {
document.getElementById("nazo_ttl").textContent = "204の謎";
document.getElementById("nazo_img").setAttribute("src", "image/nazo2.png");
document.getElementById("result").innerHTML = " ";
document.getElementById("answer").innerHTML = "しょうない";
} else if ((latlng.lat >= 38.893329 && latlng.lat <= 38.893421) && (latlng.lng >= 139.818739 && latlng.lng <= 139.818857)) {
document.getElementById("nazo_ttl").textContent = "206の謎";
document.getElementById("nazo_img").setAttribute("src", "image/nazo3.png");
document.getElementById("result").innerHTML = " ";
document.getElementById("answer").innerHTML = "つるおか";
} else if ((latlng.lat >= 38.892983 && latlng.lat <= 38.893079) && (latlng.lng >= 139.818707 && latlng.lng <= 139.818825)) {
document.getElementById("nazo_ttl").textContent = "208の謎";
document.getElementById("nazo_img").setAttribute("src", "image/nazo4.png");
document.getElementById("result").innerHTML = " ";
document.getElementById("answer").innerHTML = "ゆざ";
} else if ((latlng.lat >= 38.892561 && latlng.lat <= 38.892649) && (latlng.lng >= 139.818707 && latlng.lng <= 139.818825)) {
document.getElementById("nazo_ttl").textContent = "210の謎";
document.getElementById("nazo_img").setAttribute("src", "image/nazo5.png");
document.getElementById("result").innerHTML = " ";
document.getElementById("answer").innerHTML = "みかわ";
} else if ((latlng.lat >= 38.892302 && latlng.lat <= 38.892394) && (latlng.lng >= 139.818664 && latlng.lng <= 139.818787)) {
document.getElementById("nazo_ttl").textContent = "212の謎";
document.getElementById("nazo_img").setAttribute("src", "image/nazo6.png");
document.getElementById("result").innerHTML = " ";
document.getElementById("answer").innerHTML = "いもに";
} else {
document.getElementById("nazo_ttl").textContent = "最初の謎";
document.getElementById("nazo_img").setAttribute("src", "image/nazo0.png");
document.getElementById("result").innerHTML = " ";
document.getElementById("answer").innerHTML = "にかいのぐうすうへいけ";
}
});
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("arrive").textContent = "stop";
gpsmarker.setPopupContent("停めました");
}
watchId = null;
}
function tryWatchGPS() {
stopGPS(); // 二重で動かないように注意する
watchId = navigator.geolocation.watchPosition(
onSuccess, onError,{
maximumAge: 0, timeout: 3000, enableHighAccuracy: true});
document.getElementById("arrive").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();
// 画像の切り替え
if ((latlng.lat >= 38.894081 && latlng.lat <= 38.894173) && (latlng.lng >= 139.818792 && latlng.lng <= 139.818910)) {
document.getElementById("nazo_ttl").textContent = "202の謎";
document.getElementById("nazo_img").setAttribute("src", "image/nazo1.png");
document.getElementById("result").innerHTML = " ";
document.getElementById("answer").innerHTML = "さかた";
} else if ((latlng.lat >= 38.893642 && latlng.lat <= 38.893734) && (latlng.lng >= 139.818776 && latlng.lng <= 139.818894)) {
document.getElementById("nazo_ttl").textContent = "204の謎";
document.getElementById("nazo_img").setAttribute("src", "image/nazo2.png");
document.getElementById("result").innerHTML = " ";
document.getElementById("answer").innerHTML = "しょうない";
} else if ((latlng.lat >= 38.893329 && latlng.lat <= 38.893421) && (latlng.lng >= 139.818739 && latlng.lng <= 139.818857)) {
document.getElementById("nazo_ttl").textContent = "206の謎";
document.getElementById("nazo_img").setAttribute("src", "image/nazo3.png");
document.getElementById("result").innerHTML = " ";
document.getElementById("answer").innerHTML = "つるおか";
} else if ((latlng.lat >= 38.892983 && latlng.lat <= 38.893079) && (latlng.lng >= 139.818707 && latlng.lng <= 139.818825)) {
document.getElementById("nazo_ttl").textContent = "208の謎";
document.getElementById("nazo_img").setAttribute("src", "image/nazo4.png");
document.getElementById("result").innerHTML = " ";
document.getElementById("answer").innerHTML = "ゆざ";
} else if ((latlng.lat >= 38.892561 && latlng.lat <= 38.892649) && (latlng.lng >= 139.818707 && latlng.lng <= 139.818825)) {
document.getElementById("nazo_ttl").textContent = "210の謎";
document.getElementById("nazo_img").setAttribute("src", "image/nazo5.png");
document.getElementById("result").innerHTML = " ";
document.getElementById("answer").innerHTML = "みかわ";
} else if ((latlng.lat >= 38.892302 && latlng.lat <= 38.892394) && (latlng.lng >= 139.818664 && latlng.lng <= 139.818787)) {
document.getElementById("nazo_ttl").textContent = "212の謎";
document.getElementById("nazo_img").setAttribute("src", "image/nazo6.png");
document.getElementById("result").innerHTML = " ";
document.getElementById("answer").innerHTML = "いもに";
} else {
document.getElementById("nazo_ttl").textContent = "最初の謎";
document.getElementById("nazo_img").setAttribute("src", "image/nazo0.png");
document.getElementById("result").innerHTML = " ";
document.getElementById("answer").innerHTML = "にかいのぐうすうへいけ";
}
}
// エラー時
function onError(err) {
restN = "あと"+(--nTrial)+"回試行します。";
gpsmarker.setPopupContent("捕捉失敗:"+restN).openPopup();
if (nTrial <= 0) {
navigator.geolocation.clearWatch(watchId);
}
}
//解答の判定
function judgeAnswer(ans) {
var answer = document.getElementById("answer");
if (ans == answer.textContent) {
document.getElementById("result").innerHTML = "正解!!";
document.getElementById("result").setAttribute("class", "correct");
} else {
document.getElementById("result").innerHTML = "不正解…";
document.getElementById("result").setAttribute("class", "incorrect");
}
}
// STARTボタンに開始を仕込む
document.getElementById("start").addEventListener("click", tryWatchGPS);
// STOPボタンに停止を仕込む
document.getElementById("stop").addEventListener("click", stopGPS);
// 送信ボタンが押されたときの処理
document.getElementById("send").addEventListener("click", () => {
var input = document.getElementById("input").value;
judgeAnswer(input);
});
}, false);
