마커에 클릭 이벤트 등록하기

마커를 마우스로 클릭했을때 click 이벤트가 발생합니다. 이 예제에서는 마커를 클릭했을 때 마커 위에 인포윈도우를 표시하고 있습니다.

original docs : https://apis.map.kakao.com/web/sample/addMarkerClickEvent/

결과

Loading...

라이브 에디터

function(){ // 인포윈도우 Open 여부를 저장하는 state 입니다. const [isOpen, setIsOpen] = useState(false) return ( <Map // 지도를 표시할 Container center={{ // 지도의 중심좌표 lat: 33.450701, lng: 126.570667, }} style={{ // 지도의 크기 width: "100%", height: "450px", }} level={3} // 지도의 확대 레벨 > <MapMarker // 인포윈도우를 생성하고 지도에 표시합니다 position={{ // 인포윈도우가 표시될 위치입니다 lat: 33.450701, lng: 126.570667, }} clickable={true} // 마커를 클릭했을 때 지도의 클릭 이벤트가 발생하지 않도록 설정합니다 onClick={() => setIsOpen(true)} > {/* MapMarker의 자식을 넣어줌으로 해당 자식이 InfoWindow로 만들어지게 합니다 */} {/* 인포윈도우에 표출될 내용으로 HTML 문자열이나 React Component가 가능합니다 */} {isOpen && ( <div style={{ minWidth: "150px" }}> <img alt="close" width="14" height="13" src="https://t1.daumcdn.net/localimg/localimages/07/mapjsapi/2x/bt_close.gif" style={{ position: "absolute", right: "5px", top: "5px", cursor: "pointer", }} onClick={() => setIsOpen(false)} /> <div style={{ padding: "5px", color: "#000" }}>Hello World!</div> </div> )} </MapMarker> </Map> ) }

function(){
  // 인포윈도우 Open 여부를 저장하는 state 입니다.
  const [isOpen, setIsOpen] = useState(false)

  return (
    <Map // 지도를 표시할 Container
      center={{
        // 지도의 중심좌표
        lat: 33.450701,
        lng: 126.570667,
      }}
      style={{
        // 지도의 크기
        width: "100%",
        height: "450px",
      }}
      level={3} // 지도의 확대 레벨
    >
      <MapMarker // 인포윈도우를 생성하고 지도에 표시합니다
        position={{
          // 인포윈도우가 표시될 위치입니다
          lat: 33.450701,
          lng: 126.570667,
        }}
        clickable={true} // 마커를 클릭했을 때 지도의 클릭 이벤트가 발생하지 않도록 설정합니다
        onClick={() => setIsOpen(true)}
      >
        {/* MapMarker의 자식을 넣어줌으로 해당 자식이 InfoWindow로 만들어지게 합니다 */}
        {/* 인포윈도우에 표출될 내용으로 HTML 문자열이나 React Component가 가능합니다 */}
        {isOpen && (
          <div style={{ minWidth: "150px" }}>
            <img
              alt="close"
              width="14"
              height="13"
              src="https://t1.daumcdn.net/localimg/localimages/07/mapjsapi/2x/bt_close.gif"
              style={{
                position: "absolute",
                right: "5px",
                top: "5px",
                cursor: "pointer",
              }}
              onClick={() => setIsOpen(false)}
            />
            <div style={{ padding: "5px", color: "#000" }}>Hello World!</div>
          </div>
        )}
      </MapMarker>
    </Map>
  )
}