[네이버 지도] NAVER 지도 이미지를 마커(Marker)로 사용하기 + 예제

icon의 속성을 사용하여 지도의 마커를 원하는 이미지로 표시하는 방법이다.

속성은 단독 또는 여러 개를 혼합해서 사용할 수 있으니 아래 속성의 설명을 참조하자.

참고로 속성 설명을 위해 예시로 사용된 이미지의 크기는 (512 x 512)이다.

 

◆ icon : url 속성

---

url 속성은 마커의 아이콘으로 사용할 이미지의 경로를 지정할때 사용하는 속성이다.

url 속성을 마커에 추가하면 지정한 url경로의 이미지를 기본마커 대신 사용할 수 있다.

var marker = new naver.maps.Marker({  

    position: new naver.maps.LatLng(37.3595704, 127.105399),   

    map: map

    icon: {

                url: '/img/iconImg.png'
             }

});

icon : url 속성

 

 

◆ icon : size 속성

---

size 속성은 화면에 나타나는 마커의 크기를 지정하는 속성이다.

이 속성을 설정하지 않으면 마커가 이미지의 원래 크기로 출력된다.

설정한 마커의 크기가 이미지보다 크면 이미지가 전부 출력되겠지만, 마커의 크기가 이미지보다 작을 경우는 마커의 크기에서 벗어나는 부분은 이미지가 잘려서 출력되니 않으니 주의한다.

 

마커의 크기는 (가로, 세로) 순으로 지정하는데 이미지의 왼쪽 상단부터 마커의 크기로 지정한 영역 만큼만 출력된다.

아래 예시와 같이 마커의 크기를 (256, 256)로 지정했다면 이미지의 (0, 0) ~ (256, 256) 까지가 출력되는 영역이기 때문에 이미지 (512, 512) 의 크기가 잘려서 출력된다.

var marker = new naver.maps.Marker({  

    position: new naver.maps.LatLng(37.3595704, 127.105399),   

    map: map

    icon: {

                url: '/img/iconImg.png',
                size: new naver.maps.Size(256, 256)
             }

});

icon : size 속성

 

 

◆ icon : origin 속성

---

origin 속성을 사용하여 원점(가로, 세로)을 지정하면 지정한 원점 위치에서부터 size 속성에서 지정한 마커의 크기만큼만 지도에 출력된다.

size 속성값이 없이 origin속성만 사용한 경우는 원점으로 지정한 위치에서부터 이미지의 끝까지가 지도에 출력된다.

아래 예시의 경우 이미지(512, 512)의 왼쪽 상단으로부터 오른쪽 256 아래 50 지점부터 마커로 출력된다.

var marker = new naver.maps.Marker({  

    position: new naver.maps.LatLng(37.3595704, 127.105399),   

    map: map

    icon: {

                url: '/img/iconImg.png',
                origin: new naver.maps.Point(256, 50)
             }

});

icon : origin 속성

 

 

◆ icon : scaledSize 속성

---

마커로 노출될 아이콘의 이미지 크기를 지정하는 속성이다.

속성을 설정하지 않으면 이미지의 원래 크기로 노출된다.

아래 예시의 경우 scaledSize를 (50, 50) 했기 때문에 원래 이미지 (512, 512)가 (50, 50) 사이즈로 노출되게 된다.

var marker = new naver.maps.Marker({  

    position: new naver.maps.LatLng(37.3595704, 127.105399),   

    map: map

    icon: {

                url: '/img/iconImg.png',
                scaledSize: new naver.maps.Size(50, 50)
             }

});

icon : scaledSize 속성

◆ icon : anchor 속성

---

마커의 위도/경도 위치와 일치시킬 아이콘의 기준 위치이다.

속성을 별도로 설정하지 않으면 아이콘의 아래쪽 가운데가 마커의 위도/경도 위치와 일치된다.

var marker = new naver.maps.Marker({  

    position: new naver.maps.LatLng(37.3595704, 127.105399),   

    map: map

    icon: {

                url: '/img/iconImg.png',
                scaledSize: new naver.maps.Size(50, 50),
                anchor: new naver.maps.Point(25, 25) 
             }

});

icon : anchor 속성

---

[네이버 지도] 로컬환경(localhost)에서 NAVER 지도 API v3 사용 하기

[네이버 지도] NAVER 지도 생성하기 + 예제

[네이버 지도] NAVER 지도의 출력 언어 변경하기 + 예제

[네이버 지도] NAVER 지도에 마커(Marker) 표시하기 (단일,다중마커) + 예제

[네이버 지도] NAVER 지도 이미지를 마커(Marker)로 사용하기 + 예제

---

참조
이미지 아이콘 사용하기
https://navermaps.github.io/maps.js.ncp/docs/tutorial-3-marker-image-icon.example.html
원하는 이미지를 마커 아이콘으로 사용하기
https://navermaps.github.io/maps.js.ncp/docs/tutorial-2-Marker.html
Class: naver.maps.Marker
https://navermaps.github.io/maps.js.ncp/docs/naver.maps.Marker.html#~ImageIcon

 

---

글 내용 중 잘못된 부분이 있거나, 첨부하실 내용이 있으시면 댓글로 남겨주세요. 공부하는데 많은 도움이 됩니다.
-- 기억의 유효기간은 생각보다 짧다. --