2017-05-08 6 views
0

Ich folge dem Marker Cluster Beispiel in der Broschüre, die unten ist: marker-cluster Wie gezeigt, sind alle Marker geclustert und jetzt möchte ich die Farbe des Markers für einige ändern. So will ich wie unter einer anderen Spalte in der Datei werden mit:Wie man verschiedene Farbmarker im Cluster macht

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], 
] 

wo 0 sind blaue Markierungen und rot 1 sind rote Markierungen. Wie kann ich die Farbe des Markers abhängig von der dritten Spalte im Marker-Cluster ändern? aktualisieren

Ich habe den folgenden 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); 

Aber immer noch die Markierungsfarbe ist blau und nicht zu green.Any Hilfe ist

geschätzt geändert hat
+0

Wenn ich nicht worng bin, ist die obige Frage auf die Farbe des Markierungsclusters, wo meine Frage nicht auf der Farbe des Markierungsclusters aber der einzelnen Markierung selbst ist. Korrigiere mich, wenn ich falsch liege? – Ricky

+1

Hallo nein ich denke du hast Recht. Hier ist ein toller Post zum Aktualisieren von Markern, sollte gelten ich denke an Marker in einem Cluster oder nicht: http://stackoverflow.com/questions/7095574/google-maps-api-3-custom-marker-color-for-default- dot-marker –

+0

Ich aktualisierte meine Frage Ich folgte diesem [Tutorial] (https://github.com/pointhi/leaflet-color-markers) Aber hat nicht wie erwartet funktioniert.Könnten Sie helfen? – Ricky

Antwort

2

Eigentlich machte dies der 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); 

Ich hoffe, es hilft jedem