/* 公益大範囲: latlng(38.894697,139.817363), latlng(38.891412,139.820736)*/ document.addEventListener("DOMContentLoaded", () => { var bounds = [[38.894697,139.817363],[38.891412,139.820736]] var mymap = L.map("mymap").setView([38.893, 139.819],19); L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contrivutors' })//.addTo(mymap); L.imageOverlay("image/koeki-map.png", bounds).addTo(mymap); mymap.setMaxBounds(bounds); 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; let titen = []; let marker = []; let judge = []; let comment = []; var csvfile = "latlng.csv"; var point = []; var tmp=[]; 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); console.log(x); let p= L.latLng(x.lat,x.lng); titen.push(p); comment.push(x.comment); marker.push(L.marker(p).bindPopup(x.name).setIcon(place).addTo(mymap)); } }); } init(); 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,{ macimumAge: 0, timeout: 3000, enavleHifhAccuracy: 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]) < 20) { if (!judge[i]){ judge[i] = true; alert("スタンプゲット!!"); let img = document.getElementById(`image${i}`); img.src = "image/hanyo.png"; marker[i].setIcon(geticon); } } } } function onError(err) { restN = "あと"+(--nTrial)+"回試行します"; gpsmarker.setPopupContent("補足失敗:"+restN).openPopup(); if (nTrial <= 0) { navigator.geolocation.clearWatch(watchId); } } //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(); // } // for (var i in titen) { // if (latlng.distanceTo(titen[i]) < 30) { // if (!judge[i]){ // judge[i] = true; // let img = document.getElementById(`image${i}`); // img.src = "image/sengoku.png"; // marker[i].setIcon(geticon).setPopupContent(comment[i]); // } // } // } // }); document.getElementById("start").addEventListener("click", tryWatchGPS); document.getElementById("stop").addEventListener("click", stopGPS); }, false);