라인 미반환
(중략)
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);
});
polyline
생성courseList
를 map
으로 돌면서 각각의 코스의 좌표를 polyline
에 추가path={polyline}
적용