카카오 지도 API - 버튼 눌러 마커 변경

화면에 버튼 하나를 만들어 주고 클릭하면 이미지를 변경해준다

<button onClick={() => {

  if (!changeMarker) {
    setImgShow("./service_img.png");
    setChangeMarker(true);
  }
  else {
    setImgShow("./cow_img.png");
    setChangeMarker(false);
  }
}}>마커 변경</button>

 

실행화면

[ 문제점 ]

마커 변경 버튼을 클릭하면 좌표와 줌 레벨이 초기값으로 돌아간다.

useEffect에 imgShow 값이 변경되면 재렌더링 시키도록 했기 때문

 

[ 해결 ]

현재 좌표와 줌 레벨 값을 useState로 저장해두고 재렌더링 될때마다 저장된 값으로 변경시켜주면 해결된다.

// 지도가 이동, 확대, 축소로 인해 중심좌표가 변경되면 마지막 파라미터로 넘어온 함수를 호출하도록 이벤트를 등록합니다
kakao.maps.event.addListener(map, 'center_changed', function () {

  // 지도의  레벨을 얻어옵니다
  setMapLevel(map.getLevel());
  // mapLevel = map.getLevel();

  // 지도의 중심좌표를 얻어옵니다 
  setMapLatlng(map.getCenter());
  // mapLatlng = map.getCenter();
});

 

실행 화면