document.addEventListener("DOMContentLoaded", () => { var greenIcon= L.icon({ iconUrl:"Hana.png", iconSize:[75,75], iconAnchor:[37,75], popupAnchor:[0,-70] }); var tubomiIcon = L.icon({ iconUrl:"Tubomi .png", iconSize:[75,75], iconAnchor:[37,75], popupAnchor:[0,-70] }); fetch("./AEDmapsmall.geojson") .then(response => response.json()) .then(data => { L.geoJSON(data, { // カスタムアイコンを設定する pointToLayer: function(feature, latlng) { return L.marker(latlng, {icon: tubomiIcon}); }, // ポップアップを表示する onEachFeature: function(feature, layer){ // 地物の名前を取り出す let name = feature.properties.設置場所; // ポップアップに名前を表示する layer.bindPopup(name); } }).addTo(mymap); }); var mymap = L.map("mymap").setView([38.919, 139.828], 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 map = L.map('mapcontainer'); map.setView([113.89218,139.8378]); var gpsmarker = L.marker(mymap.getCenter()).addTo(mymap); gpsmarker.bindPopup("START").openPopup(); var nTrial = 10; var watchId = null; var point = 0; // var marker = L.marker([38.919584, 139.827638],{icon:tubomiIcon}).addTo(mymap).bindPopup("やあ"); // L.marker([38.919584, 139.827638], {icon: myIcon}).addTo(map); // var marker = L.marker([38.91979254135945, 139.82936561107638]). addTo(mymap).bindPopup("Hana.png"); // var marker = L.marker([38.920251830383336, 139.8303955793381]). addTo(mymap).bindPopup("こんにちは"); // var marker = L.marker([38.91865090803798, 139.82746660709384]). addTo(mymap); marker.on('click', function(){ if (marker.getIcon() === tubomiIcon) { marker.setIcon(greenIcon);} }); //localstorage if (localStorage.getItem('sengoku')!=0){ let img = document.getElementById("image"); img.src = "image/sengoku.png" }; //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.919584, 139.827638]); var X = L.latLng([38.91979254135945, 139.82936561107638]); var X = L.latLng([38.920251830383336, 139.8303955793381]); console.log(latlng.distanceTo(x)); if (latlng.distanceTo(x) < 30) { let sengoku =localStorage.getItem('sengoku'); if (sengoku == 0) { alert("スタンプゲット!!"); } stampget(); } } function onError(err) { restN = "あと"+(--nTrial)+"回試行します"; gpsmarker.setPopupContent("捕捉失敗:"+restN).openPopup(); if (nTrial <= 0) { navigator.geolocation.clearWatch(watchId); } } //スタンプゲットの判定 function stampget(){ let img = document.getElementById("image"); let sengoku = localStorage.getItem('sengoku') if (sengoku == 0) { img.src = "image/sengoku.png"; localStorage.setItem('sengoku',1); } } function resetstamp() { let img = document.getElementById("image"); localStorage.removeItem('sengoku'); localStorage.setItem('sengoku',0); img.src = "image/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.919584, 139.827638]); var X = L.latLng([38.91979254135945, 139.82936561107638]); var X = L.latLng([38.920251830383336, 139.8303955793381]); console.log(latlng.distanceTo(x)); if (latlng.distanceTo(x) < 30) { let sengoku =localStorage.getItem('sengoku'); if (sengoku == 0) { alert("スタンプゲット!!"); } stampget(); } }); document.getElementById("start").addEventListener("click", tryWatchGPS); document.getElementById("stop").addEventListener("click", stopGPS); document.getElementById("reset").addEventListener("click", resetstamp); }, false);