时间戳

首页 > 解决方案 > 通过功能组添加传单搜索

javascript - 通过功能组添加传单搜索

问题描述

类似于Search for marker in a markercluster group Leaflet-MarkerCluster

但是我在Marker Cluster顶部使用了一个Control 组，因此它们将在单击单选按钮时显示。

var map = L.map("map"),

parentGroup = L.markerClusterGroup(options), // Could be any other Layer Group type.
  
// arrayOfMarkers refers to layers to be added under the parent group as sub group feature
    
mySubGroup = L.featureGroup.subGroup(parentGroup, arrayOfMarkers);

parentGroup.addTo( map );
mySubGroup.addTo( map );

我正在尝试实现Leaflet Search - 但根据文档所说，它需要一个group layer标记作为第二个参数才能工作。麻烦在于使用L.featureGroup.subGroup需要一系列标记。

尝试mySubGroup在运行时迭代以使用Leaflet eachLayer获取标记层，但这将复制我在地图上为搜索工作而拥有的标记数量。

var markersLayer = new L.LayerGroup().addTo( this.map );

forEach( mySubGroup, layers => {
    layers.eachLayer( function (layer ) {
        console.log ( layer );

        markersLayer.addLayer( layer );

    })
});

   map.addControl( new L.Control.Search({layer: markersLayer}) );

标签： javascriptleafletleaflet.markercluster

解决方案

解决了这个问题——尽管它的效率很低。如果您能找到更优雅的解决方案来避免重复，请随时将其作为答案！

 var title = layer.options.title;

// iterate through the cluster points
forEach( mySubGroup, layers => {
    layers.eachLayer(function (layer) {
        var title = layer.options.title; // match the search title to marker title

         marker = new L.Circle(new L.LatLng(layer.getLatLng().lat,layer.getLatLng().lng),
            {radius: 0, title: title, fill: 'red', fillOpacity: 0, opacity: 0 }); // Create an invisible L circle marker for each cluseter marker 


        markersLayer.addLayer(marker);

    })
});

然后，您将 markerLayer 添加到 Leaflet Search

推荐阅读