FR_page.9

산불이 난 위치를 알기 위해 infowindow를 통해 경도 위도를 나타내주었다.
그리고, 두 개의 마커를 클릭 시 그 두 마커의 거리를 표현할 수 있도록 해주었다.

일단, 두 마커의 거리를 구하는 함수이다.

function getDistance(lat1, lng1, lat2, lng2) {
    function deg2rad(deg) {
        return deg * (Math.PI / 180);
    }
    var R = 6371; // 지구 반지름 (km)
    var dLat = deg2rad(lat2 - lat1);
    var dLon = deg2rad(lng2 - lng1);
    var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
            Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *
            Math.sin(dLon / 2) * Math.sin(dLon / 2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    return R * c * 1000; // 거리 (m)
}

위의 코드는, 서칭을 통해 긁어왔다.

function moveLatLngUp(lat, lng, offset = 0.0001) {
    return new kakao.maps.LatLng(lat + offset, lng);
}

let firstClick = null; // 첫 번째 클릭한 마커의 위치 저장
let infowindow = new kakao.maps.InfoWindow({ 
    zIndex: 100,
    removable : true,
});

let clickedMarkers = []; // 클릭된 마커 저장

position.forEach((a, i) => {
    setTimeout(() => {
        let location = new kakao.maps.LatLng(a[0], a[1]); 
        let markerImage = i === 0 ? firstMarkerImage : redMarkerImage;

        const marker = new kakao.maps.Marker({ 
            position: location, 
            image: markerImage, 
            zIndex: i === 0 ? 100 : 1 
        });

        marker.setMap(map); // 지도에 마커 추가

        // ✅ 마커 클릭 이벤트 추가
        kakao.maps.event.addListener(marker, "click", function () {
            const lat = location.getLat();
            const lng = location.getLng();

            // 🔥 기존 선택된 2개 마커 초기화 (3번째 마커 클릭 시)
            if (clickedMarkers.length === 2) {
                clickedMarkers.forEach((m) => m.setImage(redMarkerImage)); // 원래 크기로 변경
                clickedMarkers = []; // 배열 초기화
                firstClick = null; // 첫 번째 클릭 정보 초기화
            }

            // 현재 클릭된 마커 추가
            clickedMarkers.push(marker);
            marker.setImage(bigRedMarkerImage); // 큰 마커로 변경

            if (clickedMarkers.length === 1) {
                // 첫 번째 마커 선택
                firstClick = { lat, lng };
                let newPosition = moveLatLngUp(lat, lng, 0.0001);
                infowindow.setContent(`<div style="padding:5px;">                                
                    <strong>위도:</strong> ${convertToDMS(lat.toFixed(6))}<br>
                    <strong>경도:</strong> ${convertToDMS(lng.toFixed(6))}</div>`);
                infowindow.setPosition(newPosition); 
                infowindow.setMap(map);
                console.log("첫 번째 마커 선택:", firstClick);
            } else if (clickedMarkers.length === 2) {
                // 두 번째 마커 선택 → 거리 계산 후 표시
                const distance = getDistance(firstClick.lat, firstClick.lng, lat, lng);
                console.log("두 마커 사이의 거리:", distance.toFixed(0), "m");

                let newPosition = moveLatLngUp(lat, lng, 0.0001);
                infowindow.setContent(`<div style="padding:5px;">
                    <strong>두 위치의 거리: ${distance.toFixed(0)} m</strong><br>
                    <strong>위도:</strong> ${convertToDMS(lat.toFixed(6))}<br>
                    <strong>경도:</strong> ${convertToDMS(lng.toFixed(6))}</div>`);
                infowindow.setPosition(newPosition); 
                infowindow.setMap(map);
            }
        });
    }, i * 100);

});

두 개의 마커를 클릭 시 클릭한 마커를 표현해주기 위해 큰 마커로 변경되도록 하였다.
3번째 마커 클릭 시 앞에서 클릭한 두 개의 마커를 원본 마커 크기로 변경하기 위해 clikedMarkers배열을 설정해주었다. 이 배열의 길이로 몇번째 클릭한 마커인지 알 수 있도록 해주었다.

그리고, 첫 번째 클릭한 마커와 두 번째 클릭한 마커의 lat, lng을 알기 위해 firstclick를 설정해 주었고 두 번째 마커를 클릭하면 첫 번째 마커가 null값으로 변해 다시 처음과 두번째 마커를 클릭하여 거리를 계산할 수 있도록 해주었다.

moveLatLng함수는 infowindow의 위치가 마커를 가려서 예쁘게 보이지 않았다. 그래서 infowindow에서 offset을 통해 위치를 설정해주려 했는데 직접 적용이 안되어서 위치를 설정해주는 함수를 따로 만들어주었다.
그 결과, 마커 위에 표시되었다.