Маркеры маркера кластера и значки кластера, видимые при загрузке - PullRequest
Новая
       7

Маркеры маркера кластера и значки кластера, видимые при загрузке

0 голосов
/ 01 февраля 2019

При загрузке карты видны значки булавок и маркера.Только после увеличения до максимума все контакты выводятся из строя, и кластеры начинают работать, как и предполагалось, при уменьшении масштаба.

Что я делаю неправильно, что может вызвать эту проблему?

текущая настройка:

const markerCluster = Leaflet.markerClusterGroup({showCoverageOnHover: false})

//within a loop the markers are created:

() => {
  const pinBackground = item.current ? '#db2828' : '#3dcc4a'
  const interior = item.pin.icon_url
    ? `<img style="background: ${item.pin.color_code}" src=${item.pin.icon_url}>`
    : `<div class="mapPanelAbbreviation" style="background: ${item.pin.color_code}">${item.pin.abbreviation}</div>`
  const pinLayout = `<div class="mapPanelIconContainer" style="background:${pinBackground}">
      ${interior}
    </div>`

  let marker = Leaflet.marker(coord, {icon: Leaflet.divIcon({html: pinLayout})})
    .bindPopup(`<p class='pinText'>${item.taskId}</p><p class='pinDetails'>${item.title}</p>`)
    .addTo(this.currentMap)
    .addTo(this.markerGroup)

  markerCluster.addLayer(marker)
}

//then the markerCluster is added to the map

this.currentMap.addLayer(markerCluster)

при загрузке карты я вижу как созданные выводы (которые должны содержаться в markerCluster), так и значок кластера с отображенным количеством выводов:

enter image description here

после первого увеличения:

enter image description here

Как всегда, любое направление и помощь приветствуются, поэтому спасибозаранее!

1 Ответ

0 голосов
/ 02 февраля 2019

Просто не добавляйте свои Маркеры на карту (или в любую другую группу слоев, которая добавляется на карту), но только в свою группу MarkerClusterGroup: 

let marker = Leaflet.marker(coord, {icon: Leaflet.divIcon({html: pinLayout})})
  .bindPopup(`<p class='pinText'>${item.taskId}</p><p class='pinDetails'>${item.title}</p>`)
  //.addTo(this.currentMap) // this duplicates your Markers
  //.addTo(this.markerGroup) // this also duplicates if markerGroup is added to map

markerCluster.addLayer(marker)
...