네이버맵 사용자 위치 추적

배달앱 클론코딩 [with React Native]

작성

341

안녕하세요

네이버맵 연동 시 아래 사진과 같은 기능을 연동하려고 합니다

method 확인 시

setLocationTrackingMode <- 해당 method 인 것 같은데.. 연동 방식을 잘 모르겠습니다.

도움 부탁드립니다.

고맙습니다.

react-native

답변 1

제로초(조현영)

지식공유자

function MyMap() {
	const ref = useRef(null);

	const changeTrackingMode = () => {
		ref.current.showsMyLocationButton(true); // 또는
		ref.current.setLocationTrackingMode(TrackingMode.Follow) // 트래킹 모드 설정
	}

	return <>
		<NaverMapView
			ref={ref}
			mapType={1}
			style={styles.nMapContainer}
		/>
	</>

이런 식으로 ref.current 통해서 호출하실 수 있습니다.

김정숙

질문자

아래 전체 소스입니다

모드 변경 버튼 클릭 시 반응이 없는 것 같습니다.

import {
  Alert,
  Dimensions,
  Linking,
  Platform,
  SafeAreaView,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import NaverMapView, {Marker, Path, TrackingMode} from 'react-native-nmap';
// import LocationTerms from "./LocationTerms";
import {useEffect, useRef, useState} from 'react';
import {check, PERMISSIONS, RESULTS} from 'react-native-permissions';
import Geolocation from 'react-native-geolocation-service';

function NMap() {
  const handleMapClick = (e: any) => {
    console.log('latitude : ', e.latitude);
    console.log('latitude : ', e.longitude);
  };

  /** 장소 저장 */
  function handleLocationSave(e: any) {
    // console.log('e : ', e);
    // 현재 위치 조회
  }

  const ref = useRef(null);

  const handleChangeMode = () => {
    // console.log('ref : ', ref.current.setLocationTrackingMode);
    // console.log('ref : ', ref.current.showsMyLocationButton);
    ref.current.showsMyLocationButton(true);
    ref.current.setLocationTrackingMode(TrackingMode.Follow);
  };

  const [myPosition, setMyPosition] = useState<{
    latitude: any;
    longitude: any;
  } | null>(null);

  function getMyPosition() {
    Geolocation.getCurrentPosition(
      position => {
        console.log('position : ', position);
        setMyPosition({
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
        });
      },
      err => {
        console.log('error : ', err);
        Alert.alert('위치정보 권한 오류!', '위치정보 권한을 허용해주세요!', [
          // {
          //   text: 'Cancel',
          //   onPress: () => console.log('Cancel Pressed'),
          //   style: 'cancel',
          // },
          {
            text: '확인',
            onPress: () => {
              Linking.openSettings();
              // navigation.pop();
            },
          },
        ]);
      },
      {
        enableHighAccuracy: true,
        timeout: 20000,
        maximumAge: 10000,
      },
    );
  }

  const handleAndroidPermissions = () => {
    console.log('os : ', Platform.OS);
    console.log('version : ', Platform.Version);
    if (Platform.OS === 'android' && Platform.Version >= 23) {
      check(PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION)
        .then(result => {
          console.log('check location', result);
          if (result === RESULTS.BLOCKED || result === RESULTS.DENIED) {
            Alert.alert(
              '이 앱은 위치 권한 허용이 필요합니다.',
              '앱 설정 화면을 열어서 항상 허용으로 바꿔주세요.',
              [
                {
                  text: '네',
                  onPress: () => {
                    Linking.openSettings();
                    // navigation.popToTop();
                  },
                },
                {
                  text: '아니오',
                  onPress: () => {
                    // navigation.popToTop();
                  },
                  style: 'cancel',
                },
              ],
            );
          } else {
            // 위치정보 조회
            getMyPosition();
          }
        })
        .catch(console.error);
    }
  };

  useEffect(() => {
    if (Platform.OS === 'android') {
      handleAndroidPermissions();
    }
  }, []);

  return (
    <SafeAreaView style={{flex: 1, backgroundColor: '#ff5800'}}>
      <View
        style={{
          flex: 1,
          width: Dimensions.get('window').width,
          height: Dimensions.get('window').height,
          // marginTop: 10,
        }}>
        {myPosition && (
          <NaverMapView
            ref={ref}
            // mapType={1}
            style={{width: '100%', height: '100%'}}
            zoomControl={true}
            // showsMyLocationButton={true}
            onMapClick={handleMapClick}
            center={{
              zoom: 15,
              tilt: 10,
              // latitude: (lat1 + lat9) / 2,
              // longitude: (lng1 + lng9) / 2,
              latitude: Number(myPosition?.latitude),
              longitude: Number(myPosition?.longitude),
            }}
          />
        )}
      </View>

      <TouchableOpacity
        onPress={handleChangeMode}
        style={{paddingVertical: 15}}>
        <Text style={{textAlign: 'center', fontWeight: 'bold', color: '#fff'}}>
          모드 변경
        </Text>
      </TouchableOpacity>
    </SafeAreaView>
  );
}
export default NMap;

제로초(조현영)

지식공유자

클릭할 때 handleChangeMode 내부 console.log는 기록되나요?

김정숙

질문자

네 잘 찍힙니다

ref : {"current": {"_reactInternalInstance": {}, "_reactInternals": {"_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": undefined, "actualDuration": 2.820422001183033, "actualStartTime": 16016914.962003, "alternate": null, "child": [FiberNode], "childLanes": 0, "deletions": null, "dependencies": null, "elementType": [Function NaverMapView], "flags": 513, "index": 0, "key": null, "lanes": 0, "memoizedProps": [Object], "memoizedState": null, "mode": 2, "pendingProps": [Object], "ref": [Circular], "return": [FiberNode], "selfBaseDuration": 0.4006919991225004, "sibling": null, "stateNode": [Circular], "subtreeFlags": 512, "tag": 1, "treeBaseDuration": 0.43930700048804283, "type": [Function NaverMapView], "updateQueue": [Object]}, "animateToCoordinate": [Function anonymous], "animateToCoordinates": [Function anonymous], "animateToRegion": [Function anonymous], "animateToTwoCoordinates": [Function anonymous], "context": {}, "dispatchViewManagerCommand": [Function anonymous], "handleOnCameraChange": [Function anonymous], "handleOnMapClick": [Function anonymous], "nodeHandle": 307, "props": {"center": [Object], "onMapClick": [Function handleMapClick], "showsMyLocationButton": true, "style": [Object], "zoomControl": true}, "ref": {"_children": [Array], "_internalFiberInstanceHandleDEV": [FiberNode], "_nativeTag": 307, "viewConfig": [Object]}, "refs": {}, "resolveRef": [Function anonymous], "setLayerGroupEnabled": [Function anonymous], "setLocationTrackingMode": [Function anonymous], "showsMyLocationButton": [Function anonymous], "state": null, "updater": {"enqueueForceUpdate": [Function enqueueForceUpdate], "enqueueReplaceState": [Function enqueueReplaceState], "enqueueSetState": [Function enqueueSetState], "isMounted": [Function isMounted]}}}

위 내용으로 찍힙니다

제로초(조현영)

지식공유자

버튼을 눌렀을 때 지도가 내 위치로 이동하지도 않고, 오른쪽에 내 위치 버튼이 뜨지도 않는 건가요?

김정숙

질문자

한가지 애매한 부분은 ..

위 사진처럼 ref.current 의 2가지 method 가 비활성 상태로 되어있습니다.

김정숙

질문자

버튼을 눌렀을 때 지도가 내 위치로 이동하지도 않고, 오른쪽에 내 위치 버튼이 뜨지도 않는 건가요?

<== 네 아무런 반응이 없는 상태입니다

김정숙

질문자

위에 전달해주신 소스 기준으로 다른 부분 제외하고 최소화한 소스입니다.

위 화면에서 'Tracking Mode' 버튼 클릭해도 아무런 변화없이 위 화면 그대로 머물러 있습니다

changeTrackingMode 함수에서는 console.log 잘 찍힙니다.

제로초(조현영)

지식공유자

지금 빨갛게 뜨는 이유는 useRef에 타이핑이 안 되어있어서 그렇습니다.

useRef<NaverMapViewProps>(null) 이런 식으로 하면 타이핑 됩니다.

라이브러리가 현재 유지보수가 안 되고 있어서 라이브러리 버그일 수도 있습니다.

김정숙

질문자

타이핑은 잘 맞췄습니다.

그럼 혹시.. 다른 방법을 찾아야 하는 걸까요? ㅠ

제로초(조현영)

지식공유자

이 부분은 사실 네이티브단까지 들여다보긴 해야합니다. setLocationTrackingMode 함수 호출이 안드로이드 단으로 전파되는지를 체크해야하는데 네이티브쪽을 모르면 이 과정이 어렵긴 합니다 ㅠㅠ

제로초(조현영)

지식공유자

처음부터 showsMyLocationButton이랑 locationTrackingMode를 NaverMapView에 props로 넣으면 그건 동작하나요?

김정숙

질문자

showsMyLocationButton <- 해당 속성은 잘 동작합니다.

locationTrackingMode <- 해당 속성은 없는 속성으로 확인됩니다ㅠ

제로초(조현영)

지식공유자

아니면 저기 onInitialized 저기서 하는건 잘 돌아가나요?

김정숙

질문자

onInitialized <- 해당 method 에서 console.log 는 잘 찍히는데..

ref.current?.setLocationTrackingMode(TrackingMode.Follow);
ref.current?.showsMyLocationButton(true);

위 2가지 속성은 여전히 아무 반응이 없습니다.ㅠ

인프런 커뮤니티 질문&답변

네이버맵 사용자 위치 추적