Mapbox/leaflet.js 호버의 마커 색상 변경

Question

업데이트 : geojson을 설정할 때 새로운 마커 세트를 생성하고 즉시 mouseover 이벤트를 트리거하는 것으로 나타났습니다. 그것은 무한 루프로 그것을 깨뜨린다. 클릭으로 변경하고 작동하므로 지금 어떻게 마우스 오버로이 작업을 할 수 있습니까?

내 페스티벌 색인 페이지의 오른쪽에 내지도에 축제를로드 중입니다. 이것은 옐프의 인덱스 페이지와 비슷한 기능입니다. 그래서 데이터를 geoJSON으로 성공적으로 내 markerLayer에로드했습니다. 그러나 데이터의 geojson을 설정하여 호버 한 마커의 색상을 변경하면 '클릭'및 '마우스 아웃'이벤트가 비활성화됩니다. 이 코드를 정렬하는 데는 여러 가지 방법이 있지만 Ajax 호출에서 물건을 옮기는 데 많은 노력을 기울 였지만 제대로 작동하지 않는 것 같습니다.

왜이 코드가 작동하지 않습니까? 그리고 그것을 작동하게하려면 어떻게해야합니까? 레이어,지도 박스 및 설정 geojson에 대한 이해가 부족하다는 점을 알고 있습니다.

어쩌면 멋진 글꼴을 사용하고 대신 글꼴 색상을 변경하는 것과 같은 더 나은 해결책이 있는지 알고 싶었습니다. 모든 의견을 환영합니다! 당신이 가져가에 마커를 수정하려면

map = L.mapbox.map("index-map", "jbhatab.map-iu8zewt3") 
    markerLayer = L.mapbox.markerLayer() 
    $.ajax 
     dataType: 'text' 
     url: 'festivals.json' 
     success: (data) -> 
     geojson = $.parseJSON(data) 
     markerLayer.setGeoJSON(geojson) 
     console.log markerLayer 

     $(".event-list-item").hover (-> 
      $(this).addClass "hover" 
      console.log $(this).data('festival-id') 
     ), -> 
      $(this).removeClass "hover" 

     markerLayer.on "mouseover", (e) -> 
      e.layer.feature.properties['old-color'] = e.layer.feature.properties['marker-color'] 
      e.layer.feature.properties['marker-color'] = '#000' 
      e.layer.openPopup() 
      markerLayer.setGeoJSON(geojson) 
      console.log e.target 
      console.log 'mousover' 

     markerLayer.on "mouseout", (e) -> 
      console.log 'mouseout' 

     markerLayer.on "click", (e) -> 
      console.log 'click' 
      e.layer.unbindPopup() 
      window.open '/festivals/' + e.layer.feature.properties.id 

     markerLayer.addTo(map) 
     map.fitBounds markerLayer.getBounds() 

Answer 1

, 이벤트 객체의 layer 속성을 사용하고 그 레이어에 대한 새로운 아이콘 설정 setIcon를 사용하십시오 setGeoJSON 기능에 사용할 수 없습니다를 이 루프와 같은 루프가 발생할 수있는 경우.