[iOS] animateToCoordinates 실행 시 TypeError: undefined is not an object 에러가 발생합니다.

[Jwlee134]

Version of react-native-naver-map libraries

0.0.66

Version of react-native

0.64.2

Platforms you faced the error (IOS or Android or both?)

iOS only

Expected behavior

animateToCoordinates 메소드가 동작해야 합니다.

Actual behavior

https://stackoverflow.com/questions/52060188/fit-mapview-to-circle-bounds 위 게시물의 답변을 참고하여 원 반경 변경 시 원 중심 좌표와 반지름을 토대로 원의 top, bottom, left, right의 좌표를 불러와 배열에 담은 후 animateToCoordinates 메소드의 첫번째 인자로 넘겨주었으나 실행 시 TypeError: undefined is not an object (evaluating '(_NativeModules$ = _reactNative.NativeModules["RNNaverMapView"])[command].apply') 에러가 출력됩니다.

https://github.com/Jwlee134/Map 이 레포지토리에서 확인해보실 수 있습니다.

Tested environment (Emulator? Real Device?)

에뮬레이터

Screen Shot

https://user-images.githubusercontent.com/67630303/127618496-d88654f8-2b31-41ac-b261-3d3f67d1620c.mov

[QuadFlask]

아직 iOS 엔 animateToCoordinates 가 구현되어있지 않네요. 임시로 animateToTwoCoordinates 나 animateToRegion 을 사용하셔야할것 같습니다.

[Jwlee134]

animateToCoordinates를 사용하지 않고 전체 경로가 화면에 들어오게 animate하는 방법이 있을까요?

[qnrjs42]

I found solution.

import NaverMapView, {Marker } from 'react-native-nmap';

const mapRef = useRef<any>(null);

const PList = [
  { latitude: 37.3711013793945, longitude: 126.958999633789 },
  { latitude: 37.5654983520508, longitude: 126.990997314453 },
  { latitude: 37.5662002563477, longitude: 126.980003356934 },
];

const handleSetMapRef = useCallback(_ref => {
  mapRef.current = {
    ..._ref,
  };
}, []);

const onPressMarker = () => {
  const latArr: number[] = [];
  const lngArr: number[] = [];

  PList.forEach(v => {
    latArr.push(v.latitude);
    lngArr.push(v.longitude);
  });
  const maxLat = Math.max(...latArr);
  const minLat = Math.min(...latArr);

  const maxLng = Math.max(...lngArr);
  const minLng = Math.min(...lngArr);
  console.log(maxLat, minLat, maxLng, minLng);

  mapRef.current.animateToTwoCoordinates(
    {
      latitude: maxLat,
      longitude: maxLng,
    },
    {
      latitude: minLat,
      longitude: minLng,
    },
  );
};

return (
  <NaverMapView
    ref={handleSetMapRef}
    style={{ width: '100%', height: '100%' }}
    showsMyLocationButton={false}
    center={{ ...PList[0], zoom: 15 }}
  >
    {PList.map(p => (
      <Marker
        key={`${p.latitude}-${p.longitude}`}
        coordinate={{ ...p }}
        isForceShowIcon
        onClick={onPressMarker}
      />
    ))}
  </NaverMapView>
)

const latArr: number[] = [];
const lngArr: number[] = [];

PList.forEach(v => {
  latArr.push(v.latitude);
  lngArr.push(v.longitude);
});
const maxLat = Math.max(...latArr);
const minLat = Math.min(...latArr);

const maxLng = Math.max(...lngArr);
const minLng = Math.min(...lngArr);
console.log(maxLat, minLat, maxLng, minLng);

mapRef.current.animateToTwoCoordinates(
  {
    latitude: maxLat,
    longitude: maxLng,
  },
  {
    latitude: minLat,
    longitude: minLng,
  },
);

[judaihyun]

aos에서는 동작했기에 내가 뭘 잘못했나... 했는데 미구현이었군요 ㅠㅠ

@qnrjs42 Thank!!

[williamstephen211]

네이버맵뷰에서 long press 를 하려면 어떻게 해야 할까요? 마커 또는 NaverMapView 에서 long press props 가 없는데 어떻게 해야 할까요?