Javascript 使用传单样式的层控件和簇

我正在创建一个使用 然后，标记器集群插入

我已经让这两个插件自己处理我的数据，但不知道如何让它们一起工作

我已经下载并包含了marker cluster layer支持文件，并尝试实现它们，但没有改变任何东西

基本上，一周中的每一天都会有一个类别，然后在每天的过滤器中显示食物或饮料信息，所以我需要这种层控制。我也愿意接受关于如何创建我自己的层控件的建议，就像这样（对层进行分组，然后允许您在这些组中进行筛选）

var base=L.tillelayer（'https://api.mapbox.com/styles/v1/agrosh/cj6p9fuxu2di72ss05n5nhycx/tiles/256/{z} /{x}/{y}？访问令牌=pk.eyj1ijoiywdyb3noiwiysi6imnpewfscjnkzzawn3aycw55axb6ewtjznoifq.ZudIxK3hMrxAX8O4BXhiEg'{
});
var zoomLevel=13；
var setLat=35.593464；
var setLong=-82.551934；
var map=L.map（'map'{
居中：[设定值，设定值]，
缩放：缩放级别
});
map.addLayer（基础）；
var mondayFood=[
{
“名称”：“名称”，
“详情”：“ex”，
“地址”：“地址”，
“网站”：“，
“lat”：35.591140，
“液化天然气”：-82.552111，
“yelp”：“，
“谷歌”：“，
“img”：“img”
}];
var星期一饮料=[
{
“名称”：“名称”，
“详情”：“ex”，
“地址”：“地址”，
“网站”：“，
“lat”：35.594446，
“液化天然气”：-82.555602，
“yelp”：“，
“谷歌”：“，
“img”：“img”
}];
var markerClusters=L.markerClusterGroup.layerSupport（）.addTo（map）；
//星期一
对于（变量i=0；i

层控件可以处理传单层，而不是普通的JavaScript数据对象

在您的情况下，您甚至可能不会直接使用

mD

和

mF

层，因为它们仅在循环中临时使用

取而代之的是，经典的方法是使用传单收集你的饮料标记和食物标记。MCG.layersupport旨在处理这些图层组

var markerClusters=L.markerClusterGroup.layerSupport（）.addTo（map）；
var groupFood=L.layerGroup（）.addTo（markerClusters）；
var groupDrink=L.layerGroup（）.addTo（markerClusters）；
对于（变量i=0；i

---

实时演示：

层控件可以处理传单层，而不是普通的JavaScript数据对象

在您的情况下，您甚至可能不会直接使用

mD

和

mF

层，因为它们仅在循环中临时使用

取而代之的是，经典的方法是使用传单收集你的饮料标记和食物标记。MCG.layersupport旨在处理这些图层组

var markerClusters=L.markerClusterGroup.layerSupport（）.addTo（map）；
var groupFood=L.layerGroup（）.addTo（markerClusters）；
var groupDrink=L.layerGroup（）.addTo（markerClusters）；
对于（变量i=0；i

---

现场演示：

请问您为什么要在

overlays[0]中引用您的数据
mondayFood
和
MondayDrain
。层

而不是您从它们创建的传单层

mF

和

mD

。@ghybs抱歉，我来回切换了几次以进行测试，但我尝试在覆盖层中使用mF和mD，但没有任何效果。我想我的问题可能在于如何将集群添加到覆盖图中&然后添加到地图中，但我不确定添加它们的正确方式？请您为什么在

overlays[0]中引用您的数据
mondayFood
和
mondayDrink
，而不是您需要的传单层
mF
和
mD
    var base = L.tileLayer('https://api.mapbox.com/styles/v1/agrosh/cj6p9fuxu2di72ss05n5nhycx/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiYWdyb3NoIiwiYSI6ImNpeWFscjNkZzAwN3AycW55aXB6eWtjZnoifQ.ZudIxK3hMrxAX8O4BXhiEg', {
        });

        var zoomLevel = 13;
        var setLat = 35.593464;
        var setLong = -82.551934;

        var map = L.map('map', {
            center: [setLat, setLong],
            zoom: zoomLevel
        });
        map.addLayer(base);


    var mondayFood = [
        {
"name":"name",
"details":"ex",
"address":"",
"website":"",
"lat":35.591140,
"lng":-82.552111,
"yelp":"",
"google":"",
"img":"img"
      }];

    var mondayDrink = [
     {
"name":"name",
"details":"ex",
"address":"",
"website":"",
"lat":35.594446,
"lng":-82.555602,
"yelp":"",
"google":"",
"img":"img"
      }];



    var markerClusters = L.markerClusterGroup.layerSupport().addTo(map);

    // monday
    for ( var i = 0; i < mondayFood.length; ++i )
    {

    var monFood = mondayFood[i].img;

var mF = L.marker( [mondayFood[i].lat, mondayFood[i].lng], {icon: myIcon} )
              .bindPopup( monFood );

        markerClusters.addLayer( mF );

    }

    for ( var i = 0; i < mondayDrink.length; ++i )
    {
var monDrink = mondayDrink[i].img;

var mD = L.marker( [mondayDrink[i].lat, mondayDrink[i].lng], {icon: myIcon} )
              .bindPopup( monDrink );
 markerClusters.addLayer( mD );

    }

    var overlays = [
                        {
                            groupName : "Monday",
                            expanded : true,
                            layers    : { 
                                "Food" : mondayFood
                                "Drink" : mondayDrink,

                            }]; 
                         }

    var options = {
            container_width     : "300px",
            group_maxHeight     : "80px",
            //container_maxHeight : "350px", 
            exclusive           : false,
            collapsed : true, 
            position: 'topright'
        };

        var control = L.Control.styledLayerControl(overlays, options);
        map.addControl(control);