카카오맵 지도 -9 useMap을 이용하여 화면을 부드럽게 이동해보자

developer.do·2023년 2월 21일
0

MapPanTo 컴포넌트

import React from 'react';
import { MapMarker, useMap } from 'react-kakao-maps-sdk';

const MapPanTo = ({ item, setIsOpen }) => {
  const map = useMap();
  return (
    <>
      <MapMarker
        key={item.id}
        position={{
          lat: item.lat,
          lng: item.long,
        }}
        onClick={() => {  // 클릭시, 오버레이가 뜨고, panTo를 통해 해당 마커로 이동하기
          setIsOpen(item);
          let moveLatLng = new kakao.maps.LatLng(item.lat, item.long);
          map.panTo(moveLatLng);
        }}
      />
    </>
  );
};

export default MapPanTo;

0개의 댓글