Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. Weโ€™ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ ๐Ÿ—บ Map ] ์ขŒํ‘œ ์ฐ๊ธฐ #15

Open
wants to merge 8 commits into
base: feature-map
Choose a base branch
from

Conversation

Happhee
Copy link
Collaborator

@Happhee Happhee commented Feb 6, 2023

๐Ÿ”ฅ 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 / ๋งํฌ

image

๐Ÿ“š Reference

@Happhee Happhee self-assigned this Feb 6, 2023
@Happhee Happhee linked an issue Feb 6, 2023 that may be closed by this pull request
3 tasks
@Happhee Happhee changed the title Map/14 [ ๐Ÿ—บ Map ] ์ขŒํ‘œ ์ฐ๊ธฐ Feb 6, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[ ๐Ÿ—บ Map ] ์ขŒํ‘œ ์ฐ๊ธฐ
1 participant