function iconClick() { let center = [38.91582, 139.839059]; let clickCount = 0; //map の設定 const mymap = L.map("getPhoto", { center: [38.91582, 139.839059], minZoom: 17, maxZoom: 18, zoom: 18, scrollWheelZoom: true }); L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { attribution: '© <a href="//www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html">国土地理院</a>' }).addTo(mymap); //marker の設定 const treasureIcon = L.icon({ iconUrl: "./photo.png", iconSize: [40, 40] }) // 地点の座標 let pin = [ [38.915724, 139.840185], [38.915553, 139.839032], [38.916363, 139.838308], [38.916392, 139.837198] ]; // 関数(地点をマップに追加) function settingPin(addPinArr) { let pin = L.marker(addPinArr, { icon: treasureIcon }).addTo(mymap); pin.bindPopup(`${addPinArr}`).openPopup; L.circle(addPinArr, { radius: 15, color: "#327960" }).addTo(mymap); return pin; } let pin1 = settingPin(pin[0]); let pin2 = settingPin(pin[1]); let pin3 = settingPin(pin[2]); let pin4 = settingPin(pin[3]); // 中町の枠の設定 let nakamatiWaku = [ [38.916805, 139.837257], [38.915701, 139.841001], [38.914922, 139.840722], [38.9161, 139.836876], [38.916805, 139.837257] ] let nakamatiWakuOpt = { color: "green", opacity: 1, weight: 7 } let nakamatiWakuObj = L.polyline(nakamatiWaku, nakamatiWakuOpt).addTo(mymap); // 関数(距離と写真の取得) function getPhotoDistanceTo(NoPin, message, htmlId, photoPath) { if (marker.getLatLng().distanceTo(NoPin.getLatLng()) <= 15) { NoPin.bindPopup(message).openPopup; let img = document.getElementById(htmlId); img.setAttribute("src", photoPath); } } let marker = L.marker(center).addTo(mymap); //初期の marker を center に設定する function moveIcon(e) { marker.setLatLng(e.latlng).bindPopup(`${e.latlng}`).openPopup(); //setLatLng で e.latlng(値の座標) に座標を設定する。 getPhotoDistanceTo(pin1, "写真1発見!", "img1", "photo/yuuhi-0-0.png"); getPhotoDistanceTo(pin2, "写真2発見!", "img2", "photo/yuuhi-1-0.png"); getPhotoDistanceTo(pin3, "写真3発見!", "img3", "photo/yuuhi-0-1.png"); getPhotoDistanceTo(pin4, "写真4発見!", "img4", "photo/yuuhi-1-1.png"); } mymap.on('click', moveIcon); //click するとその値が moveIcon関数に渡る } document.addEventListener("DOMContentLoaded", () => { iconClick(); if ('serviceWorker' in navigator) { navigator.serviceWorker.register('./serviceworker.js') .then(()=> { console.log('service worker registered'); //なくてもよい }); } }, false);