Next에서 Naver map API 사용하기 (custom marker)

hotbreakb·2022년 9월 22일

marker 스타일 적용

기본 파란색 동글뱅이를 쓰기 싫을 때 url이나 content로 지정해줘야 한다. 뭘 넣어야 할지 궁금하다면 에디터에서 new naver.maps.Marker를 쳐서 Marker을 누르면 자세하게 나온다.

    class Marker extends OverlayView {
        constructor(options: MarkerOptions);
        draw(): void;
        getAnimation(): Animation;
        ...

    interface MarkerOptions {
        animation?: Animation;
        map: Map;
        position: Coord | CoordLiteral;
        icon?: string | ImageIcon | SymbolIcon | HtmlIcon;
        ...

나는 content로 했다.

      const iconStyle = `<div style="background-color:red;">Hello</div>`;

      const icon = {
        content: [iconStyle].join(""),
        size: new naver.maps.Size(32, 32),
        anchor: new naver.maps.Point(16, 16),
      };

마커에 이미지 넣기

next에서 이미지를 불러올 때 import 하면(import IconCurrentLocation from "../public/icon) 404 에러가 뜬다. src를 적을 때 🚨public을 쓰면 인식되지 않는다.🚨

      const content = [
        "<div>",
        `       <img src="/icon/current-location.svg" width="85" height="85" alt="현재 위치"/>`,
        "</div>",
      ].join("");

      const markers = [
        new naver.maps.Marker({
          position: new naver.maps.LatLng(
            coordinates.latitude,
            coordinates.longitude
          ),
          icon: {
            content,
            size: new naver.maps.Size(32, 32),
            anchor: new naver.maps.Point(16, 16),
          },
          map,
        }),
      ];

혹은

      const content: `<img src="/icon/current-location.svg" width="85" height="85" alt="현재 위치"/>`,

이곳은 성수, 성수입니다 🚉

아래와 같은 에러가 난다면 이미지 인식이 제대로 되지 않는다는 뜻이다. 나는 substring을 쓴 적도 없지만 이렇게 에러 문구가 나니까 이해가 안 될 수밖에 없지. 온갖 삽질은 다 했네 🛠

Cannot read properties of undefined (reading 'substring')

🔻 기타 나의 시도

          icon: {
            url: "public/icon/current-location.svg",
            size: new naver.maps.Size(32, 32),
            anchor: new naver.maps.Point(16, 16),
          },

실패

          icon: {
            url: IconCurrentLocation,
            size: new naver.maps.Size(32, 32),
            anchor: new naver.maps.Point(16, 16),
          },

실패

클릭한 마커로 부드럽게 이동

map.panTo를 사용한다. 첫번째 인자의 위치로 두번째 인자의 옵션으로 이동한다.

          naver.maps.Event.addListener(marker, "click", function () {
            map.panTo(
              new naver.maps.LatLng(
                coordinates.latitude,
                coordinates.longitude
              ),
              { duration: 200 }
            );
          });