네이버맵 마커 로드 후 이벤트 naver.maps.Event

네이버맵 마커 로드 이벤트

네이버맵이 로드 된 후에 마커 아이콘 이미지가 로드되기 때문에 마커 아이콘 이미지를 변경하는 이벤트는 마커 아이콘 이미지 로드가 완료되는 시점에 발생해야한다.

 

예시

개별 마커 아이콘마다 해당하는 이미지 파일 로드 후, 개별 이미지 파일이 없으면 기본 아이콘으로 적용

var arr = [['name' => 'apple'], ['name' => 'banana'], ['name' =>'orange'], ['name' => 'kiwi']];
var map = new Array();
var markers = new Array();

 
arr.forEach(function(item, i){
    var markerOptions = {
        position: position.destinationPoint(0, 0),
        map: map,
        title: item.name,
        icon: {
            url: "/images/map/map_icon_"+i+".png",
            size: new naver.maps.Size(40, 40),
            origin: new naver.maps.Point(0, 0),
            anchor: new naver.maps.Point(15, 26)
        },
        zIndex: 100
    };
    
    var marker = new naver.maps.Marker(markerOptions);
	markers[i] = marker;
    
    naver.maps.Event.addListener(markers[i], 'icon_loaded', function(){
        let img = document.querySelector('div[title="'+item["name"]+'"] img');
        let url = img.src;
        if(url.includes('/marker-default.png')) img.src = "/images/map/map_icon.png";
    });
});

 

 

 

---

 

참고사이트