Newer
Older
stamp-2022 / koki / koeki.js
@Ito Koki Ito Koki on 24 Aug 2022 4 KB add point
document.addEventListener("DOMContentLoaded", () => {
    var mymap = L.map("mymap").setView([38.893, 139.819], 17);
    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 gpsmarker = L.marker(mymap.getCenter()).addTo(mymap);
    gpsmarker.bindPopup("START").openPopup();
    let cafemarker = L.marker([38.894097, 139.819253]);
    let hallmarker = L.marker([38.892467, 139.819615]);
    let group = L.layerGroup([cafemarker,hallmarker]);
    group.addTo(mymap);
    var nTrial = 10;
    var point = 0;
    var watchId = null;
    cafemarker.bindPopup("カフェテリア").openPopup();
    hallmarker.bindPopup("公益ホール").openPopup();
    if (localStorage.getItem('cafe')!=0){
	let img = document.getElementById("image");
	img.src = "cafe.png"
    };
    if (localStorage.getItem('hall')!=0){
	let img2 = document.getElementById("image-2")
	img2.src = "hall.png"
    };
    if (localStorage.getItem('point')!=0){
	point = localStorage.getItem('point')
    };
	
    console.log(localStorage.getItem('stamp'));
    //GPSの取得に関するコード
    function stopGPS() {
	console.log("watchId="+watchId);
	if (watchId != null) {
	    navigator.geolocation.clearWatch(watchId);
	    gpsmarker.setPopupContent("止めました");
	}
	watchId = null;
    }
    function tryWatchGPS() {
	stopGPS();
	watchId = navigator.geolocation.watchPosition(
	    onSuccess,onError,{
		maximumAge: 0, timeout: 3000, enableHighAccuracy: true});
    }
    function onSuccess(pos) {
	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 x =L.latLng([38.894097, 139.819253]);
	var y =L.latLng([38.892467, 139.819615]);
	console.log(latlng.distanceTo(x));
	if (latlng.distanceTo(x) < 30) {
	    let cafe = localStorage.getItem('cafe'); 
	    if (cafe == 0) {
		alert("スタンプゲット!!");
		point+=10;
		target = document.getElementById("output");
		target.innerHTML = point;
	    }
	    stampgetcafe();
	    complete();
	}
	if  (latlng.distanceTo(y) < 30) {
	    let hall = localStorage.getItem('hall');
	    if (hall == 0) {
		alert("スタンプゲット!!");
	    }
	    stampgethall();
	    complete();
	}
    }
    function onError(err) {
	restN = "あと"+(--nTrial)+"回試行します";
	gpsmarker.setPopupContent("捕捉失敗:"+restN).openPopup();
	if (nTrial <= 0) {
	    navigator.geolocation.clearWatch(watchId);
	}
    }
    
    //スタンプゲットの判定
    function stampgetcafe(){
	let img = document.getElementById("image");
	let cafe = localStorage.getItem('cafe')
	if (cafe == 0) {
	    img.src = "cafe.png";
	    localStorage.setItem('cafe',1);
	}
    }
    function stampgethall(){
	let img2 = document.getElementById("image-2");
	let hall = localStorage.getItem('hall')
	if (hall == 0) {
	    img2.src = "hall.png";
	    localStorage.setItem('hall',1);
	}
    }
    function complete(){
	let cafe = localStorage.getItem('cafe');
	let hall = localStorage.getItem('hall');
	if (cafe == 1 && hall == 1){
	    alert("コンプリート達成!!\n102教室で景品を受け取ろう!");
	    stopGPS();
	}
    }
    function resetstamp() {
	let img = document.getElementById("image");
	let img2 = document.getElementById("image-2");
	localStorage.removeItem('cafe');
	localStorage.removeItem('hall');
	localStorage.setItem('cafe',0);
	localStorage.setItem('hall',0);
	img.src = "img.png";
	img2.src = "img.png";
    }

    //マップクリックで移動できるようにする
    mymap.options.singleClickTimeout = 250;
    mymap.on('singleclick', function(e) {
	if (true){
	    latlng = L.latLng(e.latlng);
	    gpsmarker.setLatLng(e.latlng);
	    mymap.panTo(e.latlng);
	    console.log(e.latlng);
	    gpsmarker.setLatLng(e.latlng).setPopupContent(
		"lat="+latlng.lat+", lng="+latlng.lng+""
	    ).openPopup();
	}
	var x =L.latLng([38.894097, 139.819253]);
	if (latlng.distanceTo(x) < 30) {
	    let cafe = localStorage.getItem('cafe'); 
	    if (cafe == 0) {
		alert("スタンプゲット!!");
		window.onload = fanction onLoad(){
		    point+=10;
		    target = document.getElementById("output");
		    target.innerHTML = point;
		}
	    }
	    stampgetcafe();
	    complete();
	}
    });
   
    document.getElementById("start").addEventListener("click", tryWatchGPS);
    document.getElementById("stop").addEventListener("click", stopGPS);
    document.getElementById("reset").addEventListener("click", resetstamp);
}, false);