Newer
Older
asaichi / asaichi.js
@Ito Koki Ito Koki on 24 Oct 6 KB 11月版
document.addEventListener("DOMContentLoaded", () => {
    var mymap = L.map("mymap").setView([38.91588, 139.83747], 19);
    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 cheat = location.search;
    
    var gpsmarker = L.marker(mymap.getCenter()).addTo(mymap);
    gpsmarker.bindPopup("START").openPopup();
    var LeafIcon = L.Icon.extend({
	options:{
	    shadowUrl:'src/images/marker-shadow.png',
	    shadowSize:[41,41],
	    shadowAnchor:[10,41],
	    iconSize:[25,41],
	    iconAnchor:[10,41],
	    popupAnchor:[3,-40]}});
    var place = new LeafIcon({iconUrl:"image/Yellow.png"});
    var geticon = new LeafIcon({iconUrl:"image/green.png"});
    
    var nTrial = 10;
    var watchId = null;

    var csvfile = "asaichi.csv";
    let titen = [];
    let marker = [];
    let comment= [];
    let judge = [];
    let image = [];
    var contents =[];
    let r = null;

    // function RandomNumber(){
    // 	let randomNumber= Math.floor(Math.random() *30)+1;
    	
    // 	const otherUsersNumbers = JSON.parse(localStorage.getItem('otherUsersNumbers'))||[];
    // 	while (otherUsersNumbers.includes(randomNumber)) {
    // 		randomNumber = Math.floor(Math.random() * (30))+1;
    // 	}
    	
    // 	otherUsersNumbers.push(randomNumber);
    // 	localStorage.setItem('otherUsersNumbers',JSON.stringify(otherUsersNumbers));
    	
    // 	return randomNumber;
    // }
    
    function putValues(row) {
	for (let key of Object.keys(row)) {
	}
    }
    function init(){
	fetch(csvfile).
	    then((resp) => {
		if (resp.ok) return resp.text();
	    }).then((txt) => {
		let csv = new CSV(txt,{header:true}).parse();
		for (let x of csv){
		    putValues(x);
		    var a =(x.number);
		    let p = L.latLng(x.lat,x.lng);
		    let name= (x.name);
		    image.push(x.image);
		    titen.push(p);
		    comment.push(x.comment);
		    contents[a] =`<div class="text">${name}</div><img src="${image[a]}"/></div></div>`
		    console.log(localStorage.getItem(`eleven${a}`));
		    if (localStorage.getItem(`eleven${a}`)!=="true"){
			marker.push(L.marker(p).bindPopup(contents[a]).setIcon(place).addTo(mymap));
		    }
		    if (localStorage.getItem(`eleven${a}`)=="true"){
			marker.push(L.marker(p).bindPopup(contents[a]).setIcon(geticon).addTo(mymap));
		    }
		}
	    });
    }
    init();
    function load(){
	console.log(localStorage.getItem('eleven0'));
	if (localStorage.getItem('eleven0') == "true") {
	    console.log("OK");
	    let img = document.getElementById("image0");
	    img.src = "image/hanyo.png";
	    console.log(marker);
	}
	if (localStorage.getItem('eleven1')=="true"){
	    let img = document.getElementById("image1");
	    img.src = "image/hanyo.png";
	}
    }
    load();

    function postForm(value){
	var form = document.createElement('form');
	var request = document.createElement('input');

	form.method = 'POST';
	form.action = 'https://script.google.com/macros/s/AKfycbyAK_TatK0nudr-tzIPJHzYiSOoOjmNFd9e1BCGuNZCNN3LQRHAtAxJ7N-mZTPtk9Wj3g/exec';

	request.type = 'hidden';
	request.name='text';
	request.value = value;

	form.appendChild(request);
	document.body.appendChild(form);
	
	form.submit();
	
    }
    //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();
	for (var i in titen){
	    if (latlng.distanceTo(titen[i]) < 15){
		if (!judge[i]){
		    judge[i] = true;
		    alert("スタンプゲット!!!");
		    let img =document.getElementById(`image${i}`);
		    if(i == 0){
			img.src = "image/hanyo.png";
			marker[i].setIcon(geticon);
			localStorage.setItem('eleven0',true);
		    }else if(i==1){
			img.src = "image/hanyo.png";
			marker[i].setIcon(geticon);
			localStorage.setItem('eleven1',true);
		    }
		    if (judge[0] == true){
			if(judge[1] ==true){
			    postForm('get');
			}
		    }
		}
	    }
	}
    }
    function onError(err) {
	restN = "あと"+(--nTrial)+"回試行します";
	gpsmarker.setPopupContent("捕捉失敗:"+restN).openPopup();
	if (nTrial <= 0) {
	    navigator.geolocation.clearWatch(watchId);
	}
    }
    
    // function resetstamp() {
    // 	for (var i in titen){
    // 	    let img = document.getElementById(`image${i}`);
    // 	    marker[i].setIcon(place).addTo(mymap);
    // 	    judge[i]=null;
    // 	    img.src = "image/img.png";
    // 	    localStorage.removeItem(`titen${i}`);
    // 	}
    // }

    //マップクリックで移動できるようにする
    mymap.options.singleClickTimeout = 250;
    mymap.on('singleclick', function(e) {
	if (cheat === "?cheat"){
	    var 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();
	    for (var i in titen){
		if (latlng.distanceTo(titen[i]) < 15){
		    if (!judge[i]){
			judge[i] = true;
			alert("スタンプゲット!!!");
			let img = document.getElementById(`image${i}`);
			if(i == 0){
			    img.src = "image/hanyo.png";
			    marker[i].setIcon(geticon);
			    localStorage.setItem('eleven0',true);
			}else if(i==1){
			    img.src = "image/hanyo.png";
			    marker[i].setIcon(geticon);
			    localStorage.setItem('eleven1',true);
			}
			console.log(judge);
			if (judge[0] == true){
			    if(judge[1] ==true){
				postForm('get');
			    }
			}
		    }
		}
	    }
	}
    });   
    document.getElementById("start").addEventListener("click", tryWatchGPS);
    document.getElementById("stop").addEventListener("click", stopGPS);
    // document.getElementById("reset").addEventListener("click", resetstamp);
}, false);