[리액트] 네이버 지도 marker 사용

영역의 id가 map 이라고 할 경우, 다음과 같이 css를 설정하면 지도에서 사용되는 이미지가 제대로 출력된다.

#map img {

	max-width: none;

	height: auto;

	border: 0

}

2. 이미지로 된 마커 사용하기

1.  import pin from "assets/pin.png";
    ...
       (markerPosition = new naver.maps.LatLng(
          parseFloat(obj.cctv.position.y),
          parseFloat(obj.cctv.position.x)
        ));
      new naver.maps.Marker({
        map,
        title: "Green",
        position: markerPosition,
        icon: {
          content:
            "<img src=" +
            pin +
            ' alt="" ' +
            'style="margin: 0px; padding: 0px; border: 0px solid transparent; display: block; max-width: none; max-height: none; ' +
            '-webkit-user-select: none; position: absolute; width: 22px; height: 35px; left: 0px; top: 0px;">',
          size: new naver.maps.Size(10, 10),
          anchor: new naver.maps.Point(19, 58),
        },
        draggable: true,

2.     import warn from "assets/warn.png";
   
         var icon = {
           url: warn,
           size: new naver.maps.Size(24, 37),
           anchor: new naver.maps.Point(12, 37),
           origin: new naver.maps.Point(i * 29, 0),
         },
         marker = new naver.maps.Marker({
           position: latlngs[i],
           map: map,
           icon: icon,
         });

3. html 아이콘 사용하기

    var greenMarker = new naver.maps.Marker({
    position: new naver.maps.LatLng(37.3613962, 127.1112487),
    map: map,
    title: 'Green',
    icon: {
        content: [
                    '<div class="cs_mapbridge">',
                        '<div class="map_group _map_group crs">',
                            '<div class="map_marker _marker num1 num1_big"> ',
                                '<span class="ico _icon"></span>',
                                '<span class="shd"></span>',
                            '</div>',
                        '</div>',
                    '</div>'
                ].join(''),
        size: new naver.maps.Size(38, 58),
        anchor: new naver.maps.Point(19, 58),
    },
    draggable: true
});
        

지도 예제 중 'html 아이콘 사용하기'의 소스를 그대로 가져다 썼는데 화면과 같은 아이콘이 나오지 않는다.. 다른 태그를 사용했을 때 렌더링은 잘 되고 예제의 아이콘만 안 되었다. react-naver-maps을 설치하여 사용 중인데 따로 설치해야 하는 라이브러리가 있나 찾아봤는데 나오지 않아 네이버 클라우드 플랫폼에 문의해보았다. react-naver-map은 네이버가 아닌 서드파티 라이브러리(react-native-nmap)가 제공하는 것으로, 네이버에서 제작된 것이 아니기에 기술지원을 하지 않으니 해당 라이브러리쪽에 문의하라는 답변을 받았다.

고민하다 html에서 div를 이용해 content에 담아 렌더링하는 방식을 이용하되 내가 직접 css를 꾸미기로 결정했다.