여러개 마커에 이벤트 등록하기1

여러개의 마커에 마우스 이벤트를 등록합니다. 마커에 마우스오버하면 인포윈도우에 마커의 타이틀을 표시하고 마우스아웃하면 인포윈도우를 닫습니다.

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

결과

Loading...

라이브 에디터

function(){ const data = [ { content: <div style={{ color: "#000" }}>카카오</div>, latlng: { lat: 33.450705, lng: 126.570677 }, }, { content: <div style={{ color: "#000" }}>생태연못</div>, latlng: { lat: 33.450936, lng: 126.569477 }, }, { content: <div style={{ color: "#000" }}>텃밭</div>, latlng: { lat: 33.450879, lng: 126.56994 }, }, { content: <div style={{ color: "#000" }}>근린공원</div>, latlng: { lat: 33.451393, lng: 126.570738 }, }, ] const EventMarkerContainer = ({ position, content }) => { const map = useMap() const [isVisible, setIsVisible] = useState(false) return ( <MapMarker position={position} // 마커를 표시할 위치 // @ts-ignore onClick={(marker) => map.panTo(marker.getPosition())} onMouseOver={() => setIsVisible(true)} onMouseOut={() => setIsVisible(false)} > {isVisible && content} </MapMarker> ) } return ( <Map // 지도를 표시할 Container center={{ // 지도의 중심좌표 lat: 33.450701, lng: 126.570667, }} style={{ // 지도의 크기 width: "100%", height: "450px", }} level={3} // 지도의 확대 레벨 > {data.map((value) => ( <EventMarkerContainer key={`EventMarkerContainer-${value.latlng.lat}-${value.latlng.lng}`} position={value.latlng} content={value.content} /> ))} </Map> ) }

function(){
  const data = [
    {
      content: <div style={{ color: "#000" }}>카카오</div>,
      latlng: { lat: 33.450705, lng: 126.570677 },
    },
    {
      content: <div style={{ color: "#000" }}>생태연못</div>,
      latlng: { lat: 33.450936, lng: 126.569477 },
    },
    {
      content: <div style={{ color: "#000" }}>텃밭</div>,
      latlng: { lat: 33.450879, lng: 126.56994 },
    },
    {
      content: <div style={{ color: "#000" }}>근린공원</div>,
      latlng: { lat: 33.451393, lng: 126.570738 },
    },
  ]

  const EventMarkerContainer = ({ position, content }) => {
    const map = useMap()
    const [isVisible, setIsVisible] = useState(false)

    return (
      <MapMarker
        position={position} // 마커를 표시할 위치
        // @ts-ignore
        onClick={(marker) => map.panTo(marker.getPosition())}
        onMouseOver={() => setIsVisible(true)}
        onMouseOut={() => setIsVisible(false)}
      >
        {isVisible && content}
      </MapMarker>
    )
  }

  return (
    <Map // 지도를 표시할 Container
      center={{
        // 지도의 중심좌표
        lat: 33.450701,
        lng: 126.570667,
      }}
      style={{
        // 지도의 크기
        width: "100%",
        height: "450px",
      }}
      level={3} // 지도의 확대 레벨
    >
      {data.map((value) => (
        <EventMarkerContainer
          key={`EventMarkerContainer-${value.latlng.lat}-${value.latlng.lng}`}
          position={value.latlng}
          content={value.content}
        />
      ))}
    </Map>
  )
}