Question

我有两个函数可以将标记加载到我的地图中。（两个函数在ajax调用成功时调用）

First Function是这样的：

  function loadEpsMarkers(data) {
                    for (var i = 0; i < data.length; i++) {
                        var plateNo = data[i].PLATE_NUMBER;
                        var permitNo = data[i].PERMITINFOID;
                        var inventoryId = data[i].INVENTORY_ID;
                        var icon = epsiconR;
                        if (data[i].INVENTORY_STATUS === 'Complete') {
                             icon = epsiconC;
                        }
                        var popup = '<h5>EPS</h5>' + 'Plate:' + plateNo + '<br/>' +
                            ' Permit: <a class=\'link\' data-inventoryId="' + inventoryId + '" href=' + url + '>' + permitNo + '</a>' +
                            '<p style=\"color:blue\">' + '' + '<a class=\'link\'  href=' + url + '>' + 
                            'Import' + '</a>' + '<br/>' + '<a class=\'link\'  href=' + url + '>' + 
                            'Duplicate' + '</a>' + '<br/>' + '<a class=\'link\'  href=' + url + '>' + 
                            'Removed' + '</a>' + '<br/>' + '</p>';

                        var m = L.marker([data[i].REF_LATITUDE, data[i].REF_LONGITUDE], { icon: icon, draggable: 'true' })
                                            .bindPopup(popup);
                        markerClusters.addLayer(m);

    }   
                        map.addLayer(markerClusters);
                    map.invalidateSize(false);
}

除数据不同外，第二个功能相同。这很好用，我按预期得到了聚类标记。

现在我有一个按钮，当我点击此按钮时，它应该隐藏第一个呼叫的标记。

简单的方法是删除图层，然后重做第二次调用。但这似乎是一种低效的方式。

如果我有4个这样的数据调用，并且我想从每个调用中切换标记，这会变得更加复杂。

我也试过这样的事情：

 $('#dvEpsOnlyMarkers').click(function () {
            markerClusters.removeLayer(m);
        });

但那不起作用。关于如何使这项工作的任何想法？

提前致谢

Answer 1

实现所描述内容的一种非常简单的方法是存储对数组中每个组的标记的引用，并操纵这些数组以将这些图层添加到MCG中：

var markersCall1 = [],
    markersCall2 = [],
    markersCall3 = [],
    markersCall4 = [];

function loadEpsMarkersX(data) { // Replace X by 1...4
    for (var i = 0; i < data.length; i++) {
        // Convert data...

        var m = L.marker(/* latLng, options, popup... */);

        markersCallX.push(m); // Replace X by 1...4
    }

    // Actually add to MarkerClusterGroup.
    // Replace X by 1...4
    markerClusters.addLayers(markersCallX); // note the addLayers with "s".
}


$('#dvEpsOnlyMarkersX').click(function (event) { // Replace X by 1...4
    // Assuming it is a checkbox, you can use it to toggle.
    if (this.checked) {
        // Replace X by 1...4
        markerClusters.addLayers(markersCallX); // note the "s".
    } else {
        // Replace X by 1...4
        markerClusters.removeLayers(markersCallX); // note the "s".
    }
});

如果您要添加/删除批量标记，则可以方便地使用标记数组的MarkerClusterGroup方法addLayers and removeLayers（带有 s 尾随）处理。这些方法比逐个添加/删除标记更有效。

从传单标记集

1 个答案: