[개인] DLD Project (4) - Google map Polyline

틀린 내용이 있을 수 있습니다.
발견하시면 말씀 부탁드립니다! 🙇

---

Google map polyline을 통해 구글맵 위에 도형을 그릴 수 있다. 나는 불필요하게 Google polyline 객체 생성하는 걸 지양하고자 사용자가 특정 버튼을 클릭해야 지도상에 도형이 그려지도록 했다.

const handleDisplayPolylineButton = () => {
  // localstorage에 저장한 좌표배열 추출
  let pathList = localStorage.getItem('pathList');
  
  if (pathList === null) {
    alert('No path data.');
  }

  pathList = JSON.parse(pathList);
  // 도형 객체 생성
  const flightPath = new google.maps.Polyline({
    path: pathList,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2,
  });
  
  // 지도에 도형 객체 바인딩
  flightPath.setMap(map);
};

...

<Button
  className="button-default"
  onClick={handleDisplayPolylineButton}
>
  경로 보기
</Button>

코드를 보면 localStorage에서 pathList를 꺼내온다. 참고로 pathList는 좌표 객체들을 요소로 가진 배열로, 30초마다 한 번씩 현재 좌표를 읽어 pathList에 저장하도록 처리했다.

---

참고 문서

• https://developers.google.com/maps/documentation/javascript/shapes?hl=ko