expo - google map mapView의 getMapBoundaries사용 방법

어플을 사용하여 지도의 데이터를 불러올 때 어플 화면에서 북동쪽 좌표와 남서쪽 좌표를 구하여 현재 내가 보고 있는 화면의 지도영역 데이터만 가져와야 속도도 느리지 않고 모든 데이터를 불러올 필요가 없게됩니다.

 

• 9~12번 라인 처음으로 북동쪽 좌표와 남서쪽 좌표를 설정해줍니다.
• mapRef는 MapView를 저장할 변수입니다.
• boundsBox는 지도를 이동할 때 마다 북동쪽 좌표와 남서쪽 좌표를 저장할 변수
• location은 지도를 띄울때 기본 설정으로 보이게 할 장소
• handleRegionChange function은 지도를 이동할 때 마다 북동쪽 좌표와 남서쪽 좌표를 얻어오는 함수
• 지도를 이동할 때 마다 getMapBoundaries 이벤트를 발생시켜 북동쪽 좌표와 남서쪽 좌표를 가져옵니다.

import { useQuery } from "@apollo/client";
import React, { useState } from "react";
import { StyleSheet, View, Dimensions } from "react-native";
import MapView from "react-native-maps";
import { LIST_TOUR_MUTATION } from "./query/query";
 
export default function Home() {
  // 기본으로 설정할 북동쪽 좌표와 남서쪽 좌표
  const [south_west_lng, setSouth_west_lng] = useState(127.34119882365631);
  const [north_east_lng, setNorth_east_lng] = useState(127.43504419962248);
  const [south_west_lat, setSouth_west_lat] = useState(36.276630375631854);
  const [north_east_lat, setNorth_east_lat] = useState(36.420513558735344);
 
  const [mapRef, setMapRef] = useState(null);
  const [boundsBox, setBoundsBox] = useState();
  const [location, setLocation] = useState({
    latitude: 36.3504567,
    longitude: 127.3848187,
  });
 
  const handleRegionChange = async (region) => {
    setBoundsBox(await mapRef.getMapBoundaries());
    setSouth_west_lng(boundsBox.southWest.longitude);
    setNorth_east_lng(boundsBox.northEast.longitude);
    setSouth_west_lat(boundsBox.southWest.latitude);
    setNorth_east_lat(boundsBox.northEast.latitude);
  };
 
  const { data, loading } = useQuery(LIST_TOUR_MUTATION, {
    fetchPolicy: "network-only",
    variables: {
      category: 1,
      south_west_lng,
      north_east_lng,
      south_west_lat,
      north_east_lat,
    },
  });
 
  return (
    <>
      <View style={styles.mapContainer}>
        <MapView
          ref={(ref) => {
            setMapRef(ref);
          }}
          style={styles.map}
          initialRegion={{
            latitude: location.latitude,
            longitude: location.longitude,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
          onRegionChangeComplete={handleRegionChange}
        >
          {!loading ? (
            <>
              {data.listTour.position.map((marker, i) => (
                <MapView.Marker
                  key={i}
                  coordinate={{
                    latitude: marker.latitude,
                    longitude: marker.longitude,
                  }}
                />
              ))}
            </>
          ) : null}
        </MapView>
      </View>
    </>
  );
}
const styles = StyleSheet.create({
  mapContainer: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
    position: "absolute",
  },
  map: {
    width: Dimensions.get("window").width,
    height: Dimensions.get("window").height,
  },
});