클릭한 위치에 마커 표시하기

지도를 마우스로 클릭했을때 click 이벤트가 발생합니다. 이 예제는 지도를 클릭했을 때 해당 위치에 마커를 올리는 예제입니다. 이때 마커는 1개만 생성하여 클릭한 위치로 옮겨주고 있습니다.

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

결과

Loading...

라이브 에디터

function(){ const Main = () => { const [position, setPosition] = useState() return ( <> <Map // 지도를 표시할 Container center={{ // 지도의 중심좌표 lat: 33.450701, lng: 126.570667, }} style={{ width: "100%", height: "450px", }} level={3} // 지도의 확대 레벨 onClick={(_t, mouseEvent) => setPosition({ lat: mouseEvent.latLng.getLat(), lng: mouseEvent.latLng.getLng(), })} > {position && <MapMarker position={position} />} </Map> {position && <p>{'클릭한 위치의 위도는 ' + position.lat + ' 이고, 경도는 ' + position.lng + ' 입니다'}</p>} </> ) } return (<Main/>) }

function(){
  const Main = () => {
    const [position, setPosition] = useState()
    return (
      <>
        <Map // 지도를 표시할 Container
          center={{
            // 지도의 중심좌표
            lat: 33.450701,
            lng: 126.570667,
          }}
          style={{
            width: "100%",
            height: "450px",
          }}
          level={3} // 지도의 확대 레벨
          onClick={(_t, mouseEvent) => setPosition({
            lat: mouseEvent.latLng.getLat(),
            lng: mouseEvent.latLng.getLng(),
          })}
        >
          {position && <MapMarker position={position} />}
        </Map>
        {position && <p>{'클릭한 위치의 위도는 ' + position.lat + ' 이고, 경도는 ' + position.lng + ' 입니다'}</p>}
      </>
    )
  }
  return (<Main/>)
}