Newer
Older
2023-Tsubasa / game2 / homework / pwa / getPhoto.js
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: '&copy; <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);