여러개 마커 제어하기

지도를 클릭한 위치에 마커를 표시하고 지도에 표시되고 있는 마커들을 감추고 다시 지도 위에 표시합니다.

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

결과

Loading...

라이브 에디터

function(){ const [markers, setMarkers] = useState([ { position: { lat: 33.450701, lng: 126.570667, }, }, ]) const [isVisible, setIsVisible] = useState(true) return ( <> <Map // 지도를 표시할 Container center={{ // 지도의 중심좌표 lat: 33.450701, lng: 126.570667, }} style={{ // 지도의 크기 width: "100%", height: "450px", }} level={3} // 지도의 확대 레벨 onClick={(_target, mouseEvent) => { setMarkers([ ...markers, { position: { lat: mouseEvent.latLng.getLat(), lng: mouseEvent.latLng.getLng(), }, }, ]) }} > {isVisible && markers.map((marker, index) => ( <MapMarker key={`${marker.position}-${index}`} position={marker.position} // 마커를 표시할 위치 /> ))} </Map> <div style={{ display: "flex", gap: "10px", }} > <button onClick={() => setIsVisible(false)}>마커 감추기</button> <button onClick={() => setIsVisible(true)}>마커 보이기</button> </div> </> ) }

function(){
  const [markers, setMarkers] = useState([
    {
      position: {
        lat: 33.450701,
        lng: 126.570667,
      },
    },
  ])

  const [isVisible, setIsVisible] = useState(true)

  return (
    <>
      <Map // 지도를 표시할 Container
        center={{
          // 지도의 중심좌표
          lat: 33.450701,
          lng: 126.570667,
        }}
        style={{
          // 지도의 크기
          width: "100%",
          height: "450px",
        }}
        level={3} // 지도의 확대 레벨
        onClick={(_target, mouseEvent) => {
          setMarkers([
            ...markers,
            {
              position: {
                lat: mouseEvent.latLng.getLat(),
                lng: mouseEvent.latLng.getLng(),
              },
            },
          ])
        }}
      >
        {isVisible &&
          markers.map((marker, index) => (
            <MapMarker
              key={`${marker.position}-${index}`}
              position={marker.position} // 마커를 표시할 위치
            />
          ))}
      </Map>
      <div
        style={{
          display: "flex",
          gap: "10px",
        }}
      >
        <button onClick={() => setIsVisible(false)}>마커 감추기</button>
        <button onClick={() => setIsVisible(true)}>마커 보이기</button>
      </div>
    </>
  )
}