[ 🗺 Map ] 좌표 찍기

[Happhee]

🔥 Related Issues

close #14

🍀 작업 내용

• 내 위치 나타내기
• 이동 위치 나타내기
• 선그리기

🌈 PR Point

📄 components/KakaoMap.tsx

커스텀 이미지로 마커를 표시하고, 위치 정보들을 통해 이동 경로를 나타내는 선을 구현!

 const markerImgSrc = MapCurrent;
      const markerImgSize = new kakao.maps.Size(window.screen.width * 0.08, window.screen.width * 0.08);
      const markerImg = new kakao.maps.MarkerImage(markerImgSrc, markerImgSize);
      const markerPosition = new kakao.maps.LatLng(kakaoMapInfo.latitude, kakaoMapInfo.longitude);
      const marker = new kakao.maps.Marker({
        position: markerPosition,
        image: markerImg,
      });

      const linePath = mapLocationInfo.map((location) => new kakao.maps.LatLng(location.latitude, location.longitude));
      const kakaoPolyline = new kakao.maps.Polyline({
        path: linePath,
        strokeWeight: 5,
        strokeColor: '#EF8D8A',
        strokeOpacity: 0.7,
        strokeStyle: 'solid',
      });

✅ utils/getDistanceKm.ts

위도 경도 정보를 통한 거리 계산을 해당 util에서 진행!

const RADIUS_EARTH_KM = 6371;
const degreesToRadians = (deg: number) => {
  return deg * (Math.PI / 180);
};
export const getDistanceKm = (mapLocationList: KakaoMapLocation[]) => {
  return mapLocationList.reduce((distance, currentLocation, index) => {
    if (index) {
      const startLatRads = degreesToRadians(currentLocation.latitude);
      const startLongRads = degreesToRadians(currentLocation.longitude);
      const destLatRads = degreesToRadians(mapLocationList[index - 1].latitude);
      const destLongRads = degreesToRadians(mapLocationList[index - 1].longitude);

      const calDistance =
        Math.acos(
          Math.sin(startLatRads) * Math.sin(destLatRads) +
            Math.cos(startLatRads) * Math.cos(destLatRads) * Math.cos(startLongRads - destLongRads),
        ) * RADIUS_EARTH_KM;
      return distance + Number(calDistance.toFixed(2));
    }
    return distance;
  }, 0);
};

👀 스크린샷 / GIF / 링크

📚 Reference

• 선의 거리 계산하기