GoogleMaps PolyLine 전체 보기

산책기록을 누르면, 해당 기록의 모든 폴리라인이 한눈에 들어오게 카메라를 이동시키는 코드를 작성했다. 생각보다 잘 동작한다.

https://stackoverflow.com/questions/36685372/how-to-zoom-in-out-in-react-native-map

How to zoom in/out in react-native-map?

// 산책기이 변경되면, 해당 기록의 폴리라인 전체를 보여주게 카메라 이동.
// locations는 산책기록 데이터임.
useEffect(() => {
    if (locations.length) {
      const sortLat = locations
        .slice()
        .sort((a, b) => Number(a.latitude) - Number(b.latitude));
      const sortLong = locations
        .slice()
        .sort((a, b) => Number(a.longitude) - Number(b.longitude));

      const latitudeDelta =
        Math.abs(sortLat[0].latitude - sortLat[sortLat.length - 1].latitude) *
        1.2;
      const longitudeDelta =
        Math.abs(
          sortLong[0].longitude - sortLong[sortLat.length - 1].longitude,
        ) * 1.2;

      refMapView.current?.animateToRegion({
        latitude:
          (sortLat[0].latitude + sortLat[sortLat.length - 1].latitude) / 2,
        longitude:
          (sortLong[0].longitude + sortLong[sortLong.length - 1].longitude) / 2,
        latitudeDelta,
        longitudeDelta,
      });
    }
  }, [locations]);