인터랙티브 지도 예제

사용자 상호작용이 있는 고급 예제입니다.

지도 클릭으로 마커 추가

import { useState } from "react";
import { Map, Marker } from "@rousen/react-naver-maps";

function ClickToAddMarker() {
  const [markers, setMarkers] = useState<
    Array<{ x: number; y: number; id: number }>
  >([]);
  const [idCounter, setIdCounter] = useState(0);

  const handleMapClick = (event: naver.maps.PointerEvent) => {
    const coord = event.coord;
    setMarkers((prev) => [...prev, { x: coord.x, y: coord.y, id: idCounter }]);
    setIdCounter((prev) => prev + 1);
  };

  return (
    <div style={{ width: "100%", height: "400px" }}>
      <Map ncpKeyId="your-ncp-key-id" onClick={handleMapClick}>
        {markers.map((marker) => (
          <Marker key={marker.id} position={{ x: marker.x, y: marker.y }} />
        ))}
      </Map>
    </div>
  );
}

export default ClickToAddMarker;

마커 드래그

import { useState } from "react";
import { Map, Marker } from "@rousen/react-naver-maps";

function DraggableMarker() {
  const [position, setPosition] = useState({ x: 127.0276, y: 37.4979 });

  return (
    <div style={{ width: "100%", height: "400px" }}>
      <Map ncpKeyId="your-ncp-key-id">
        <Marker
          position={position}
          draggable={true}
          onPositionChanged={(marker) => {
            const pos = marker.getPosition();
            setPosition({ x: pos.x, y: pos.y });
          }}
        />
      </Map>
      <div style={{ marginTop: "10px" }}>
        현재 위치: {position.x.toFixed(4)}, {position.y.toFixed(4)}
      </div>
    </div>
  );
}

export default DraggableMarker;

지도 이벤트 처리

import { useState } from "react";
import { Map } from "@rousen/react-naver-maps";

function MapEvents() {
  const [events, setEvents] = useState<string[]>([]);

  const addEvent = (eventName: string) => {
    setEvents((prev) => [eventName, ...prev].slice(0, 10));
  };

  return (
    <div>
      <div style={{ width: "100%", height: "400px" }}>
        <Map
          ncpKeyId="your-ncp-key-id"
          onClick={() => addEvent("지도 클릭")}
          onZoomStart={() => addEvent("줌 시작")}
          onZoomEnd={() => addEvent("줌 종료")}
          onDragStart={() => addEvent("드래그 시작")}
          onDragEnd={() => addEvent("드래그 종료")}
          onBoundsChanged={() => addEvent("범위 변경")}
        />
      </div>
      <div style={{ marginTop: "10px" }}>
        <h3>이벤트 로그:</h3>
        <ul>
          {events.map((event, index) => (
            <li key={index}>{event}</li>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default MapEvents;

지도 제어 버튼

import { useRef } from "react";
import { Map } from "@rousen/react-naver-maps";

function MapControls() {
  const mapRef = useRef<naver.maps.Map>(null);

  const zoomIn = () => {
    if (mapRef.current) {
      const currentZoom = mapRef.current.getZoom();
      mapRef.current.setZoom(currentZoom + 1);
    }
  };

  const zoomOut = () => {
    if (mapRef.current) {
      const currentZoom = mapRef.current.getZoom();
      mapRef.current.setZoom(currentZoom - 1);
    }
  };

  const setCenter = (x: number, y: number) => {
    if (mapRef.current) {
      mapRef.current.setCenter(new naver.maps.LatLng(y, x));
    }
  };

  return (
    <div>
      <div style={{ marginBottom: "10px" }}>
        <button onClick={zoomIn}>확대</button>
        <button onClick={zoomOut} style={{ marginLeft: "5px" }}>
          축소
        </button>
        <button
          onClick={() => setCenter(127.0276, 37.4979)}
          style={{ marginLeft: "5px" }}
        >
          강남역으로 이동
        </button>
        <button
          onClick={() => setCenter(126.978, 37.5665)}
          style={{ marginLeft: "5px" }}
        >
          서울역으로 이동
        </button>
      </div>
      <div style={{ width: "100%", height: "400px" }}>
        <Map ref={mapRef} ncpKeyId="your-ncp-key-id" />
      </div>
    </div>
  );
}

export default MapControls;