inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

react-native-nmap 사용자 각도 관련 문제

399

민성 김

작성한 질문수 2

0

사용자가 바라보고 있는, 즉 기기가 바라보고 있는 각도를 실시간으로 반영해주고 싶은데
Swing 앱을 보면 그렇게 구현되어 있거든요, 그런데 제가 구현할 때는

    (mapRef.current as NaverMapView).setLocationTrackingMode(
      TrackingMode.Follow
    );

위와 같이 구현하게 되면 반쪽짜리 해결입니다. 사용자가 바라보고 있는 각도에 따라 실시간으로 반영이 되지만, TrackingMode이기에 지도를 스와이프해서 이동하게 되면 사용자 위치에 해당하는 마커에서 각도를 알려주지 않게 됩니다.

TrackingMode를 사용하지 않고 이를 해결할 수 있는 방법이 있을까요? 아래는 NaverMap 코드입니다.

 앗 참고로 expo환경입니다.

import React, { useEffect, useRef, useState } from 'react';
import NaverMapView, { TrackingMode } from 'react-native-nmap';
import NaverMapView from 'react-native-nmap';

import useMyLocation from '@/hooks/use-my-location';
import type { TCoordinate } from '@/types/react-native-nmap';

interface INaverMapViewProps {
  zoom: number;
  children?: React.ReactNode;
  center: TCoordinate;
  onCameraChange: (e: {
    latitude: number;
    longitude: number;
    zoom: number;
  }) => void;
}

export default function NaverMaps({
  children,
  center,
  zoom,
  onCameraChange,
}: INaverMapViewProps) {
  const { currentLocation, currentHeading } = useMyLocation();
  const mapRef = useRef<NaverMapView>(null);
  const [userInteraction, setUserInteraction] = useState<boolean>(false);

  useEffect(() => {
    if (!userInteraction && currentLocation) {
      const updatedCenter = {
        ...center,
        latitude: currentLocation.latitude,
        longitude: currentLocation.longitude,
        zoom: zoom,
        tilt: 0,
        bearing: currentHeading,
      };
      (mapRef.current as NaverMapView).animateToCoordinate(updatedCenter);
    }
  }, [currentLocation, currentHeading, userInteraction, zoom, center]);

  const handleCameraChange = (e: {
    latitude: number;
    longitude: number;
    zoom: number;
  }) => {
    setUserInteraction(true); // 사용자가 상호작용했음을 나타냅니다.
    onCameraChange(e);
  };

  const handleMapClick = () => {
    setUserInteraction(true); // 사용자가 수동으로 상호작용했으므로 자동으로 중심 이동을 하지 않습니다.
  };

  return (
    <NaverMapView
      ref={mapRef}
      style={{ width: '100%', height: '100%' }}
      center={center}
      bearing={currentHeading}
      minZoomLevel={13}
      maxZoomLevel={18}
      onCameraChange={handleCameraChange}
      zoomControl={false}
      scaleBar={false}
      rotateGesturesEnabled={true}
      onMapClick={handleMapClick}
      compass={false}
      stopGesturesEnabled={true}
      mapType={0}
    >
      {children}
    </NaverMapView>
  );
}

react-native

답변 2

0

민성 김

bearing에 대해 잘못 이해하고 있었는데, 값을 임의로 조절해보니 지도 자체의 회전을 줘버리더라구요..
그리고 center값 내부의 bearing의 값을 임의로 조절해보니 아무런 변화가 없습니다


image현재 위와 같이 파란색 사용자 마커에 화살표 표시가 안뜹니다.

image하지만 Swing 앱을 보았을 때, 저렇게 사용자가 바라보고 있는 위치까지 표시해주고 있습니다. 네이버 지도도 마찬가지이구요!



0

제로초(조현영)

https://navermaps.github.io/android-map-sdk/guide-ko/4-2.html

제가 봤을 때는 위 페이지의 커스텀 위치 추적을 네이티브로 구현한 것 같습니다.

0

민성 김

아 그러면 네이티브단을 건드려야하는군요..ㅠ
다른 방법을 찾아봐야겠습니다! 빠른 답변 감사합니다

0

민성 김

진작에 커스텀 마커로 해결할걸 그랬습니다.. 괜한 오기였던 것 같네요.... 하핫

0

제로초(조현영)

bearing 부분을 저장하고있다가 스와이프 끝날 때 반영하는 것은 안 되나요??

앱실행시 네이버맵 [401] 에러

0

959

2

스타일링 라이브러리

0

147

2

expo, cli 선택 중에 고민이 있습니다.

0

167

2

JDK 버전이 달라도 괜찮나요?

0

223

2

dimenstion usewindowdeminstion

0

120

3

[맥 전용]환경 설정하기 1편 & [맥 전용]환경 설정하기 2편의 영상이 안나옵니다.

0

209

1

jdk11 버전과 gradle 버전의 호환성 관련 질문드립니다.

0

398

2

강의 외 질문입니다!

0

157

2

react native랑 맞는 ui 라이브러리 어떤게 좋을까요?

0

1487

2

react native와 spring boot 연결

0

353

1

java가 아닌 .kt에서 code push 에러가 발생합니다.

0

210

2

flipper 239 에러가 발생합니다.

0

163

2

package.json에 /lib/panino.js 문제입니다.

0

464

2

window - mac 협업 과정 질문합니다

0

214

1

ios 빌드 중 RCTBridgeDelegate.h import 오류

0

289

2

ios 앱 빌드 중 hermesEnabled 관련 오류발생

0

238

2

Socket 연결시 질문 드립니다.!

0

151

2

wifi 환경에서 axios 통신이 로컬서버에서 안됩니다.

0

425

2

iOS render error 질문드립니다.

0

410

2

iOS 가상머신 오류

0

164

2

npc react init 명령어 실행시 발생되는 오류

0

220

1

nom start 시 오류

0

116

1

NextJS 기반으로 만들어서 웹뷰 React Native로 배포 가능한가요?

0

996

2

안드로이드 rn75 버전에 맞게 설정 중에 android13 다운로드에 대해서 막혔습니다!

0

183

2