108일차 TIL : 최종프로젝트 - 카카오맵 마커간 라인 연결

변시윤·2023년 2월 17일
0

내일배움캠프 4기

목록 보기
117/131
post-custom-banner

에러

라인 미반환

원인

(중략)

  return (
    <>
      {courseList.map((item: any, index: number) => (
        <>
          (중략)
          <Polyline
            path={[
                    [
                      { lat: item.position.lat, lng: item.position.lng },
                    ],
                  ]}
          />
        </>
      ))}
    </>
  );

리액트 카카오맵 SDK의 예시를 보면 아래와 같이 path 안에 라인을 연결해줄 좌표 정보가 담겨있다. 그러나 위 코드는 반복문이기 때문에 path 안에 좌표 정보가 들어오는 것이 아니라 <Polyline /> 컴포넌트가 item 갯수만큼 반복되고 있기 때문에 라인이 나타나지 않는 것이다.

      <Polyline
        path={[
          [
            { lat: 33.452344169439975, lng: 126.56878163224233 },
            { lat: 33.452739313807456, lng: 126.5709308145358 },
            { lat: 33.45178067090639, lng: 126.572688693875 },
          ],
        ]}
      />

해결

  let polyline: any = [];

  courseList.map((item: any) => {
    polyline.push(item.position);
  });
  1. 빈 배열 polyline 생성
  2. courseListmap으로 돌면서 각각의 코스의 좌표를 polyline에 추가
  3. path={polyline} 적용
profile
개그우먼(개발을 그은성으로 하는 우먼)
post-custom-banner

0개의 댓글