Eojin Han

GPS 기능 사용

아래 문서 참조

NaverMap 현재위치 보기 버튼과 연동

Geolocation.getCurrentPosition() 함수로 GPS를 통한 현 위치를 얻을 수 있다.

첫번째 함수가 위치조회에 성공했을 때의 콜백함수이므로 여기에 지도의 중앙 위치를 지정하는 상태값을 업데이트 해주면 된다.

위도&경도 얻기

콜백 함수가 전달받는 프롭(info라고 명명하겠음)을 출력하면 아래와 같다.

따라서 아래와 같이 좌표를 얻을 수 있다.

위도 : info.coords.latitude

경도 : info.coords.longitude

소스코드 구현


...

//GPS 사용하기
import Geolocation from '@react-native-community/geolocation';

export function PNaverMap({ navigation }) {

...

    //시작 위치는 시청역
    const [curLocation, setCurLocation] = useState({ "latitude": 37.564362, "longitude": 126.977011 });

    return (
        <View style={{ width: '100%', height: '100%' }}>
            ...

            {/* 지도 위 옵션 버튼들 */}
            <View style={{ justifyContent: 'flex-start', alignItems: 'flex-start', position: 'absolute', top: 10 }}>
                <PIconButtonM iconName="note-multiple-outline" text="모아보기" iconColor="ivory" onPress={() => setListModalVisible(true)} iconStyle={styles.button} />
                <PIconButtonM iconName="crosshairs-gps" text="현재위치" iconColor="ivory" iconStyle={styles.button}
                    onPress={() => {
                        //curLocation 값이 안바뀌면 NaverMapView의 center가 제대로 반영안됨. => 0으로 바꿨다가 다시 셋팅
                        setCurLocation({ "latitude": 0, "longitude": 0 });
                        Geolocation.getCurrentPosition(info => setCurLocation({ "latitude": info.coords.latitude, "longitude": info.coords.longitude }));
                    }
                    } />
            </View>

           ...

        </View>
    );
}

...