2016-06-10 126 views
0

我目前在使用PNG作爲標記,但我想將點擊&活動狀態的標記更改爲不同的png。單擊更改Mapbox標記圖像

我該如何做到這一點?

 var icon = [ 
      { 
       "className": "my-icon icon-dc", // class name to style 
       "html": '<img class="style-svg" src="wp-content/uploads/2016/06/circle.svg" alt="">', // add content inside the marker 
       "iconSize": [60,60] // size of icon, use null to set the size in CSS 
      } 
     ]; 

    myLayer.on('layeradd', function(e) { 
     var marker = e.layer, 
      feature = e.layer.feature; 

     marker.setIcon(L.divIcon(feature.properties.icon)); 
    }); 


     // Listen for individual marker clicks. 
    myLayer.on('click',function(e) { 
     // Force the popup closed. 
     e.layer.closePopup(); 

     var feature = e.layer.feature; 
     var content = '<div><div id="close1" class="absolute_p"><img class="exit" src="/wp-content/uploads/2016/06/[email protected]"></div>' + 
         '<img src="' + feature.properties.img + '" alt="">' + 
         '<h4>' + feature.properties.title + '</h4>' + 
         '<p>' + feature.properties.description + '</p>' + 
         '<p class="num">' + feature.properties.num + 'Properties now showing</p>' + 
         '<a href="'+ feature.properties.url +'" class="btn btn-default btn-lg absolute_p" target="_blank">find your second home here</a></div>'; 

     info.innerHTML = content; 
     map.panTo(e.layer.getLatLng()); 

    }); 

回答

0

在您click事件處理結束,爲什麼不直接使用在e.layer與參考setIcon到「主動」 /「點擊」圖標聲明別的地方?

var myNewIcon = L.icon({ 
    iconUrl: 'my-new-icon.png' 
}); 

e.layer.setIcon(myNewIcon) 

http://leafletjs.com/reference.html#icon

+0

這工作但是,如果我點擊其他標記標記不改回舊 – PatrickC

+0

我想通了。結合jquery將所有標記的src更改爲舊標記作品! – PatrickC

+0

或者你可以用'.eachLayer()'循環標記並自己重置它們。 – snkashis