3

我在 AngularJS 应用程序上使用 Leaflet 和 Marker Cluster 插件。

在地图的项目上选择时，我需要突出显示它。因为我使用的是 divIcons，所以我正在添加或删除类，如果项目不是标记，也会设置颜色。

为此，我将最后单击的项目保存在内存中，以便在选择下一个项目时，我可以取消突出显示前一个项目并突出显示当前项目。

        // De-highlight previous item
        if (lastClickedLayer) {
            if (lastClickedLayer instanceof L.Marker) {
                lastClickedLayer._icon.classList.remove('marker-highlighted');
            }
            else {
                lastClickedLayer.setStyle({
                    color: (lastClickedLayer.feature.status === 'active') ? '#43A7E0' : '#EB7938'
                });
            }
        }

        // Highlight item on the map
        lastClickedLayer = e.layer;

        if (e.layer instanceof L.Marker) {
            e.layer._icon.classList.add('marker-highlighted');
        }
        else {
            e.layer.setStyle({
                color: '#32C9AC'
            });
        }

如果不是标记聚类，一切都会好起来的！当我缩小并获得一组当前标记（假设我先选择一个标记）然后放大回该群集时，我选择的标记没有分配“标记突出显示”类。

另外，如果我处于缩放的末端，并且簇显示标记的蜘蛛网（或它们如何称呼），那么当关闭选择标记的群集时，我似乎无法解开类别的类别该层的-它只是未定义。

我怎么可能解决我的问题？

哦，我的地图项保存为新的 L.MarkerClusterGroup()。

4

1 回答 1

1

您可以尝试在选择标记时从群集中删除标记...

markerCluster.removeLayer(selectedMarker);
map.addLayer(selectedMarker);

并在取消选择时将其放回集群...

map.removeLayer(selectedMarker);
markerCluster.addLayer(selectedMarker);

您可以在此处看到一个显示单选的示例

每次创建标记时，都会添加此单击处理程序...

        m.on('click', function(e) {
            if(selectedMarker != false) {
                map.removeLayer(selectedMarker);
                markerCluster.addLayer(selectedMarker);
                selectedMarker.setIcon(unselectedIcon);
                if(selectedMarker == e.target) {
                    console.log('clear selection');
                    selectedMarker = false;
                }
                else {
                    console.log('change selection');
                    selectedMarker = e.target;
                    selectedMarker.setIcon(selectedIcon);
                    markerCluster.removeLayer(selectedMarker);
                    map.addLayer(selectedMarker);
                }
            }
            else {
                console.log('new selection');
                selectedMarker = e.target;
                selectedMarker.setIcon(selectedIcon);
                markerCluster.removeLayer(selectedMarker);
                map.addLayer(selectedMarker);
            }
        });

但是，我可以看到两个缺点：

  1. 如果你想要一个弹出窗口，你必须使用另一个事件
  2. 标记从群集中检索或添加到群集时的移动可能会干扰用户
于 2014-08-27T17:49:32.030 回答