FR_page.6

하나의 기기에 설정 아이콘을 눌렀을 때 보여지는 단말기 설치 정보 모달을 수정했다.

전에 지도로 위치 찾기의 코드를 가져와 적용했다.

const getMaps = useCallback(() => {
	
	kakao.maps.load(async () => {
		let container = document.getElementById('kakaoMap3');
		if (!container) return;
	
	const center = { lat : Location.latitude, lng : Location.longitude};

	let options = {
		center: new kakao.maps.LatLng(center.lat, center.lng),
		//center : position,
		level: 1, //줌 레벨(숫자가 클수록 더 넓은 영역 표시)
	};

	const map = new window.kakao.maps.Map(container, options);

	map.setMapTypeId(window.kakao.maps.MapTypeId.ROADMAP);

	const greenMarkerImage = new window.kakao.maps.MarkerImage(
		blueMarker, // 초록색 마커 이미지 URL
		new window.kakao.maps.Size(40, 45), // 이미지 크기
		{
			offset: new window.kakao.maps.Point(12, 35), // 이미지의 중앙 하단이 앵커가 되도록 설정
		}
	);

	let geocoder = new kakao.maps.services.Geocoder();

	
	let markerPosition = new kakao.maps.LatLng(Location.latitude, Location.longitude);
	markerRef.current = new kakao.maps.Marker({
		position: markerPosition,
		image: greenMarkerImage,
	});
	markerRef.current.setMap(map);
	

	
	geocoder.coord2Address(Location.longitude, Location.latitude, function (result, status) {
		if (status === kakao.maps.services.Status.OK) {
			const _arr = result[0].address.address_name; // 변환된 주소
			console.log(_arr);
				formikRef.current.setFieldValue('customerAddress', _arr);
		}
	});

	kakao.maps.event.addListener(map, "click", function (mouseEvent) {
		let latlng = mouseEvent.latLng;
		console.log(latlng);
		markerRef.current.setPosition(latlng);
		formikRef.current.setFieldValue('lat', latlng.Ma);
		formikRef.current.setFieldValue('lng', latlng.La);
		
		geocoder.coord2Address(latlng.getLng(), latlng.getLat(), function (result, status) {
			if (status === kakao.maps.services.Status.OK) {
				const address = result[0].address.address_name;
					formikRef.current.setFieldValue('customerAddress', address);
			}
		
		});
		
	});	
	
	
});
},[Location]);

useEffect(() => {
	getMaps()
}, [getMaps]);

이 부분에서 만약 이미 기기에 주소가 할당되어 있는 상태라면, 할당된 주소의 위치를 표현해주는 것이 맞다고 생각했다.
하지만, 현재 위치에 주소를 할당하고고 싶을 때는 설치 정보 모달이 띄어질 때, 현재의 위치를 받아와 표현해주는 것이 편할 것이라고 생각해서 그 부분은 제외하고 표현해주었다.

formikRef.current.setFieldValue('lat', latlng.Ma);
formikRef.current.setFieldValue('lng', latlng.La);

이 부분을 추가해주어서, 하나의 기기를 클릭하고 들어갔을 때 기기의 위치를 표현할 수 있도록 했다.

추가로, 산불이 난 위치의 경도 위도를 기기 정보에 표현해주었다. 원래는 주소를 가져와 보여줬는데 산에서 난 불은 주소가 비슷할 것이고, 경도 위도로 위치를 표현해주는게 가장 중요하다고 생각하여 바꾸었다.

경도 위도의 표현법중 도분초를 사용해서 표현해주었다.
현재 제공되는 lat lng을 변경하는 코드를 추가했다.

const convertToDMS = (deg) => {
    const absolute = Math.abs(deg);
    const degrees = Math.floor(absolute);
    const minutesNotTruncated = (absolute - degrees) * 60;
    const minutes = Math.floor(minutesNotTruncated);
    const seconds = ((minutesNotTruncated - minutes) * 60).toFixed(2);

    return `${degrees}° ${minutes}' ${seconds}"`;
};