Mapbox / leaflet.js在悬停时更改标记的颜色

Question

更新：我发现当我设置geojson时，它正在创建新的标记集并立即触发mouseover事件。它无限循环并打破它。我将其更改为单击并且它可以正常工作，那么我现在如何使用悬停来完成此工作？

我正在将节日加载到我右侧的地图上以获取我的节日索引页面。这与yelp的索引页面类似。所以我已经成功地将数据作为geoJSON加载到我的markerLayer，但是当我设置数据的geojson来改变正在悬停的标记的颜色时，它会禁用“click”和“mouseout”事件。有很多方法可以订购这些代码，我已经尝试了很多移动ajax调用的东西，但我似乎无法让它工作。

为什么这段代码不起作用？我能做些什么才能让它发挥作用？我知道这与我对图层，mapbox和设置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函数不应该用于可能导致像这样的循环的情况。