2013-11-28 18 views
0

UPDATE: Я обнаружил, что когда я устанавливаю geojson, он создает новый набор маркеров и сразу вызывает событие mouseover. Он бесконечно петляет и разбивает его. Я изменил его, чтобы щелкнуть, и он работает, так как я могу сделать эту работу с помощью hover сейчас?Mapbox/leaflet.js изменить цвет маркера на hover

Я загружаю фестивали на свою карту с правой стороны для моей страницы индекса фестиваля. Это аналогичная функциональность для индексной страницы yelp. Таким образом, я успешно загрузил данные как geoJSON в мой markerLayer, но когда я установил геоинформацию данных для изменения цвета маркера, который завис, он отключает события «click» и «mouseout». Существует много способов заказать этот код, и я много пробовал с перемещением материала из вызова ajax, но я не могу заставить его работать.

Почему этот код не работает? И что я могу сделать, чтобы он работал? Я знаю, что это связано с моим недостатком понимания слоев, mapbox и установки geojson.

Я также хотел знать, есть ли лучшее решение моей проблемы, например, использование шрифта удивительным и изменение цвета шрифта. Вся обратная связь приветствуется!

Festival Index

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() 

ответ

2

Если вы хотите изменить маркер на парении, используйте атрибут объекта события layer и использовать setIcon установить новую иконку для этого слоя: функция setGeoJSON не должна использоваться в случаях, когда он может вызвать цикл, подобный этому.

Смежные вопросы