Javascript 传单群集更改所有自定义标记图标

Javascript 传单群集更改所有自定义标记图标,javascript,leaflet,leaflet.markercluster,Javascript,Leaflet,Leaflet.markercluster,我有4个自定义标记图标,它们根据代码中设置的一些条件显示在地图上。如果没有传单簇,它们都会显示,但当我添加传单簇时,它会自动将所有不同的海关图标更改为一个 <div id="map-view" style="z-index: 1; height: 550px; width: 100%"></div> JAVASCRIPT代码 let locations = [{ "network_operator": "MTN",

我有4个自定义标记图标,它们根据代码中设置的一些条件显示在地图上。如果没有传单簇,它们都会显示,但当我添加传单簇时,它会自动将所有不同的海关图标更改为一个

<div id="map-view" style="z-index: 1; height: 550px; width: 100%"></div> 

JAVASCRIPT代码

 let locations = [{ "network_operator": "MTN",
                        "latitude":6.50895,
                        "longitude":3.37028
                   },{ "network_operator": "GLO",            
                       "latitude":6.590604,  
                        "longitude":3.541904
                    }];
        const authorizedUser = {
            user1: ['MTN', 'Operator'],
            user2: ['GLO', 'Operator'],
            user3: ['9MOBILE','Operator'],
            user4: ['AIRTEL','Operator'],
            staff: ['ZYSOD','Staff']
        };

            const operatorStaffColor = {
                'MTN': '/static/img/marker-icon-mtn.png', //MTN
                'GLO': '/static/img/marker-icon-glo.png', //glo
                '9MOBILE': '/static/img/marker-icon-9mobile.png',
                'AIRTEL': '/static/img/marker-icon-airtel.png' //airtel
            }
    var enteredURL = window.location.pathname;
    var user = enteredURL.slice(4, (enteredURL.length)+1); // get the actual value after slicing 
    // the user variable is gotten from the URL which is later used in the script
var operatorIcon = new L.Icon({ 
                iconUrl: '', 
                shadowUrl: '/static/img/marker-shadow.png',
                iconSize: [25, 41],
                iconAnchor: [12, 41],
                popupAnchor: [1, -34],
                labelAnchor: [6, 0],
                shadowSize: [41, 41]
              });
    let mymap = L.map("map-view", {
                                        doubleClickZoom:!1,
                                        closePopupOnClick:!1            
                                    }).setView([9.367231, 7.765842], 6); 
    L.tileLayer("https://{s}.tile.osm.org/{z}/{x}/{y}.png", { 
                                        attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors' 
                                    }).addTo(mymap); 
                                    var markers = new L.markerClusterGroup({ disableClusteringAtZoom: 14 ,spiderfyOnMaxZoom: false, showCoverageOnHover: false, zoomToBoundsOnClick: false, animate:false});
     for (var i = 0; i < locations.length; i++) {
    if(authorizedUser[user][1] ==='Operator'){
    operatorIcon.options.iconUrl=operatorStaffColor[locations[i].network_operator]}
else{
        operatorIcon.options.iconUrl=operatorStaffColor[locations[i].network_operator];
        }
        markers.addLayer(L.marker([locations[i].latitude,locations[i].longitude], {icon: operatorIcon}).bindPopup(status, {
                                                autoClose: !1, 
                                                closeButton: !1, 
                                                maxWidth: 560
                                                    }));
        }                
                                        mymap.addLayer(markers);
        markers.on('clusterclick', function (a) {
                                            console.log('click');
                                            a.layer.spiderfy();
                                        });
let locations=[{“网络运营商”:“MTN”,
“纬度”:6.50895,
“经度”:3.37028
},{“网络运营商”:“GLO”,
“纬度”:6.590604,
“经度”:3.541904
}];
const authorized duser={
用户1:['MTN','Operator'],
用户2:['GLO','Operator'],
用户3:['9MOBILE','Operator'],
用户4:['AIRTEL','Operator'],
职员:['ZYSOD','staff']
};
常量运算符TaffColor={
“MTN”:“/static/img/marker icon MTN.png”,//MTN
“GLO”:“/static/img/marker icon GLO.png”,//GLO
“9MOBILE”:“/static/img/marker-icon-9MOBILE.png”,
'AIRTEL':'/static/img/marker icon AIRTEL.png'//AIRTEL
}
var enteredURL=window.location.pathname;
var user=enteredURL.slice(4,(enteredURL.length)+1);//获取切片后的实际值
//用户变量是从URL获取的,该URL稍后将在脚本中使用
var operatorIcon=新的L.图标({
iconUrl:“”,
shadowUrl:“/static/img/marker shadow.png”,
iconSize:[25,41],
iconAnchor:[12,41],
popupAnchor:[1,-34],
拉贝朗乔:[6,0],
阴影大小:[41,41]
});
让mymap=L.map(“地图视图”{
双击缩放:!1,
closePopupOnClick:!1
}).setView([9.367231,7.765842],6);
L.tileLayer(“https://{s}.tile.osm.org/{z}/{x}/{y}.png”,{
属性:“©;贡献者”
}).addTo(mymap);
var markers=new L.markerClusterGroup({disableClusteringAtZoom:14,spiderfyOnMaxZoom:false,showCoverageOnHover:false,zoomToBoundsOnClick:false,animate:false});
对于(变量i=0;i
您在哪里使用网络类型?您从未使用operatorStaffColor。你不应该在markers.addLayer之前将颜色分配给operatorIcon吗?@zakariah1我已经更新了代码。除了集群将所有标记更改为
for loop
中最后一个指定的标记之外,一切都正常运行。我认为这个authorizedUser[1]==='Operator'从来都不是真的,但是代码的方式和您的问题都无关紧要。你是说授权用户[:user1]?您可以尝试不使用标记,然后尝试以下操作吗?L.marker([locations[i].纬度,locations[i].经度],{icon:operatorIcon}).bindpoop(状态,{autoClose:!1,closeButton:!1,maxWidth:560}).addTo(mymap)@zakariah1这种情况有效,但这不是我的问题。主要问题是传单集群将所有不同的标记图标转换为一个(这是for循环中最后指定的图标)。这使得很难区分标记谢谢我发现了问题你在哪里使用网络类型?您从未使用operatorStaffColor。你不应该在markers.addLayer之前将颜色分配给operatorIcon吗?@zakariah1我已经更新了代码。除了集群将所有标记更改为
for loop
中最后一个指定的标记之外,一切都正常运行。我认为这个authorizedUser[1]==='Operator'从来都不是真的,但是代码的方式和您的问题都无关紧要。你是说授权用户[:user1]?您可以尝试不使用标记,然后尝试以下操作吗?L.marker([locations[i].纬度,locations[i].经度],{icon:operatorIcon}).bindpoop(状态,{autoClose:!1,closeButton:!1,maxWidth:560}).addTo(mymap)@zakariah1这种情况有效,但这不是我的问题。主要问题是传单集群将所有不同的标记图标转换为一个(这是for循环中最后指定的图标)。这使得区分标记变得很困难谢谢你我发现了这个问题