Javascript 基于传单中的数据属性更改标记颜色

我有一组json格式的数据，我想为传单中的每一个设置一个特定的标记颜色。 数据如下：

var BillingDate = [
          {"branchcode":"668",
          "saleyear":"99",
          "saleprd":"3",
          "LastX":"36.649717",
          "LastY":"52.488193",
          "flag":"1",
          "flag_Title":null
          },
          {
            "branchcode":"669",
          "saleyear":"99",
          "saleprd":"3",
          "LastX":"36.712585",
          "LastY":"52.935543",
          "flag":"0",
          "flag_Title":null
          }
          {
           "branchcode":"669",
          "saleyear":"99",
          "saleprd":"3",
          "LastX":"36.712585",
          "LastY":"52.935543",
          "flag":"2",
          "flag_Title":null
          }
        ];

我想说如果flag==0将标记颜色设置为蓝色，如果flag==1将标记颜色设置为红色，依此类推。 我怎样才能在传单上做到这一点？因为if循环函数本身不起作用，我想。。。 我将此代码与一些标记一起使用：

var customColor = "blue";

    if (ODO[i].flag === 1)
    customColor = "red";
    else if (ODO[i].flag === 2)
    customColor = "orange";
    else if (ODO[i].flag === 3)
    customColor = "green";

    var customMarker = L.AwesomeMarkers.icon({
    markerColor: customColor
    });
    var mainMap = L.marker( [ODO[i].LastX, ODO[i].LastY] , {icon: customMarker})
                    .bindPopup( popup );
    markerClusters.addLayer( mainMap );

但这给了我一个错误

Layer.js:52 Uncaught TypeError: t.addLayer is not a function
at i.addTo (Layer.js:52)
at MarkerOnMap (functions.js:61)
at Object.success (app.js:213)
at i (0:4002)
at XMLHttpRequest.Request.f.onload (0:4179)

在线：

window.mainMap.addLayer（markerClusters）；markerClusterLayer=L.markerClusterGroup（{disableClusteringAtZoom:13}）.addTo（mainMap）

有人能帮我吗？
我已经更新了我的示例，请看->

更新：添加markerClusterGroup插件

以下是您问题的解决方案：


//配置映射
让配置={
minZoom:7，
maxZomm:18，
};
//地图开始时的放大率
常数缩放=17；
//坐标
常数lat=52.2297700；
常数lon=21.0117800；
//用弹出文本协调数组
设点=[{
“lat”：52.230020586193795，
“液化天然气”：21.01083755493164，
“文本”：“第1点”，
“旗帜”：1
},
{
“lat”：52.22924516170657，
“液化天然气”：21.011320352554325，
“文本”：“第2点”，
“标志”：0
},
{
“lat”：52.2295113044688444，
“液化天然气”：21.01270973682404，
“文本”：“第3点”，
“旗帜”：2
},
{
“lat”：52.23040500771883，
“液化天然气”：21.012146472930908，
“文本”：“第4点”，
“旗帜”：3
}
];
//呼叫地图
const map=L.map（'map'，config.）.setView（[lat，lon]，zoom）；
//用于在地图上加载和显示平铺层
//大多数磁贴服务器都需要属性，您可以在“图层”下设置属性`
L.tileLayer（'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
属性：“©；贡献者”
}).addTo（地图）；
//创建带有咖啡图标的红色标记
功能颜色（标志）{
让colorMarker=''；
开关（标志）{
案例0：
彩色标记='粉红色'；
打破
案例1：
彩色标记='红色'；
打破
案例2：
彩色标记='蓝色'；
打破
案例3：
彩色标记='绿色'；
打破
违约：
打破
}
返回L.AwesomeMarkers.icon({
彩色标记器：彩色标记器
});
}
设markers=L.markerClusterGroup（）；
//向地图添加多个标记的循环
for（设i=0；i
*，
：之后，
：之前{
框大小：边框框；
填充：0；
保证金：0；
}
html{
身高：100%；
}
身体，
html，
#地图{
身高：100%；
保证金：0；
填充：0；
}
检查
window.mainMap
vs
mainMap
。我怀疑其中一个是
未定义的
。