(리액트)카카오맵 인포윈도우에 대한 질문

지도/로컬 API
1

지도/로컬 API에 대한 문의게시판입니다.

  1. 카카오맵을 이용해서 인포윈도우를 띄우려고 합니다.
  • 인포윈도우에는 해당 장소에 대한 설명과 함께 [버튼]이 하나 들어갈 예정입니다.

  1. 리액트로 작업중이어서 당연하게도 인포윈도우를 띄우는 코드도 리액트 위에서 돌아갑니다.

  2. 인포윈도우를 띄우는 infowindow.setContent();에는 인자로 html만을 받으며 리액트 컴포넌트를 받을 수 없습니다.

  3. 그래서 js에서 템플릿 리터럴로 html을 작성해서 넘겨주었더니,
    위에서 언급한 [버튼]이 리액트환경에서 동작하다 보니 눌리지도 않았는데 동작하는 오류가 있습니다.
    (html과 리액트의 차이로 인한 그 오류 맞습니다.)

  4. 디자인 상, 인포윈도우에 버튼이 꼭 있었으면 좋겠는데, 혹시 해결할 수 있는 방법이 있을까요?

  • 코드는 사정 상 첨부하지 못하여 죄송합니다…
  • 정 불가능하다면, 버튼을 맵 밖으로 빼는 방안도 생각중입니다.
  • 카카오 데브톡인데 문제원인이 카카오 api와는 관련이 먼, 리액트 자체에 관한 지식 부족이라 죄송하게 생각하고 있습니다.
  • 카카오맵 인포윈도우에 리액트 컴포넌트 삽입방법 문의 에 따르면, 정상적인 접근은 불가능할 것 같은데… 포기하고 있으면 되는지요
2

리액트에서도 인포윈도우 또는 커스텀오버레이에 버튼을 생성해서 이용할 수 있습니다.
아래 답변처럼 HTMLElement로 content를 구성하고 버튼에 이벤트를 등록해서 사용해주세요.
코드상에서 커스텀 오버레이로 생성하지만 인포윈도우로 변경해도 동작되는 걸 확인할 수 있습니다.
현재 코드와 비교해서 확인해주세요.

3

감사합니다~

인포 윈도우 안에 넣을 것들이 많아서 template leteral로 다 작성하다보니 이렇게 되었는데, 처음부터 저렇게 작성하니 되네요.

1개의 좋아요