draggable 마커 이벤트 적용하기

드래그가 가능한 마커에 dragstart, dragend 이벤트를 등록합니다. 이 예제에서는 마커의 드래그가 시작될 때 즉, dragstart 이벤트가 발생할 때 마커의 이미지를 다른이미지로 변경하며, 마커의 드래그가 끝날 때 즉, dragend 이벤트가 발생할 때 마커의 이미지를 처음 이미지로 재변경하고 있습니다.

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

결과

Loading...

라이브 에디터

function() { const startImage = { src: "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/red_b.png", size: [50, 45], options: { offset: [15, 43], }, } const startDragImage = { src: "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/red_drag.png", size: [50, 64], options: { offset: [15, 54], }, } const endImage = { src: "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/blue_b.png", size: [50, 45], options: { offset: [15, 43], }, } const endDragImage = { src: "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/blue_drag.png", size: [50, 64], options: { offset: [15, 54], }, } const [start, setStart] = useState(startImage) const [end, setEnd] = useState(endImage) 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, }} image={start} draggable={true} // 마커를 클릭했을 때 지도의 클릭 이벤트가 발생하지 않도록 설정합니다 onDragStart={() => setStart(startDragImage)} // 마커가 이동하면 이미지를 변경합니다 onDragEnd={() => setStart(startImage)} // 마커가 이동하면 이미지를 변경합니다 /> <MapMarker // 마커를 생성하고 지도에 표시합니다 position={{ // 마커가 표시될 위치입니다 lat: 33.450701, lng: 126.572667, }} image={end} draggable={true} // 마커를 클릭했을 때 지도의 클릭 이벤트가 발생하지 않도록 설정합니다 onDragStart={() => setEnd(endDragImage)} // 마커가 이동하면 이미지를 변경합니다 onDragEnd={() => setEnd(endImage)} // 마커가 이동하면 이미지를 변경합니다 /> </Map> ) }

function() {
  const startImage = {
    src: "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/red_b.png",
    size: [50, 45],
    options: {
      offset: [15, 43],
    },
  }

  const startDragImage = {
    src: "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/red_drag.png",
    size: [50, 64],
    options: {
      offset: [15, 54],
    },
  }

  const endImage = {
    src: "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/blue_b.png",
    size: [50, 45],
    options: {
      offset: [15, 43],
    },
  }

  const endDragImage = {
    src: "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/blue_drag.png",
    size: [50, 64],
    options: {
      offset: [15, 54],
    },
  }
  const [start, setStart] = useState(startImage)
  const [end, setEnd] = useState(endImage)

  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,
        }}
        image={start}
        draggable={true} // 마커를 클릭했을 때 지도의 클릭 이벤트가 발생하지 않도록 설정합니다
        onDragStart={() => setStart(startDragImage)} // 마커가 이동하면 이미지를 변경합니다
        onDragEnd={() => setStart(startImage)} // 마커가 이동하면 이미지를 변경합니다
      />
      <MapMarker // 마커를 생성하고 지도에 표시합니다
        position={{
          // 마커가 표시될 위치입니다
          lat: 33.450701,
          lng: 126.572667,
        }}
        image={end}
        draggable={true} // 마커를 클릭했을 때 지도의 클릭 이벤트가 발생하지 않도록 설정합니다
        onDragStart={() => setEnd(endDragImage)} // 마커가 이동하면 이미지를 변경합니다
        onDragEnd={() => setEnd(endImage)} // 마커가 이동하면 이미지를 변경합니다
      />
    </Map>
  )
}