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

사용자가 바라보고 있는, 즉 기기가 바라보고 있는 각도를 실시간으로 반영해주고 싶은데
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>
  );
}