简体   繁体   English

如何在群集中制作不同的颜色标记

[英]How to make different color markers in cluster

I am following the marker cluster example in leaflet which is below: marker-cluster As shown all the markers are clustered and now I want to modify the color of the marker for some. 我在下面的传单中关注标记群集的示例: marker-cluster如图所示,所有标记都是群集的,现在我要为某些标记修改颜色。 So i will be having another column in the file like below: 因此,我将在文件中添加另一列,如下所示:

var addressPoints = [
[-37.8210922667, 175.2209316333, "2",0],
[-37.8210819833, 175.2213903167, "3",1],
[-37.8210881833, 175.2215004833, "3A",1],
[-37.8211946833, 175.2213655333, "1",0],
[-37.8209458667, 175.2214051333, "5",0],
[-37.8208292333, 175.2214374833, "7",1],
]

where 0 are blue markers and red 1 are red markers. 其中0是蓝色标记,红色1是红色标记。 So how can I change the color of the marker depending on the third column in the marker cluster? 那么如何根据标记簇中的第三列来更改标记的颜色? Update 更新资料

I added the following code 我添加了以下代码

var map = L.map('map', {center: latlng, zoom: 13, layers: [tiles]});
var greenIcon = new L.Icon({
  iconUrl: '/img/marker-icon-2x-green.png',
  shadowUrl: '/img/marker-shadow.png',
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  shadowSize: [41, 41]
});



        var markers = L.markerClusterGroup();

        for (var i = 0; i < addressPoints.length; i++) {
            var a = addressPoints[i];
            var title = a[2];
if(a[3]==0){

var marker = L.marker(new L.LatLng(a[0], a[1]), { title: title },{icon: greenIcon});
}
else{

var marker = L.marker(new L.LatLng(a[0], a[1]), { title: title });

}

            marker.bindPopup(title);
            markers.addLayer(marker);
        }
        map.addLayer(markers);

But still the marker color is blue and did not change to green.Any help is appreciated 但是标记的颜色仍然是蓝色,并没有变为绿色。

Actually this made the trick: 实际上,这就是窍门:

var map = L.mapbox.map('map', 'mapbox.streets')
        .setView([-37.82, 175.215], 14);

    var markers = new L.MarkerClusterGroup();

    for (var i = 0; i < addressPoints.length; i++) {
        var a = addressPoints[i];
        var title = a[2];

        if(a[3]==1){
var marker = L.marker(new L.LatLng(a[0], a[1]), {
            icon: L.mapbox.marker.icon({'marker-symbol': 'car', 'marker-color': '#00FFFF'}),
            title: title
        });
        }
        else{
            var marker = L.marker(new L.LatLng(a[0], a[1]), {
            icon: L.mapbox.marker.icon({'marker-symbol': 'car', 'marker-color': '#ff0000'}),
            title: title
        });
        }

        marker.bindPopup(title);
        markers.addLayer(marker);
    }



    map.addLayer(markers);

Hope it helps anyone 希望它能帮助任何人

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM