2017-05-08 22 views
0

以下のリーフレットのマーカークラスタの例に従っています: marker-cluster すべてのマーカーがクラスタ化されているので、マーカーの色を変更したい場合があります。だから、以下のようにファイル内の別の列を有するであろう:0青マーカーおよび赤色1であるクラスタで色分けする方法

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

は赤いマーカーです。では、マーカークラスターの3番目の列に応じて、マーカーの色を変更するにはどうすればよいですか? 更新

私は、次のコード

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); 

を追加しました。しかし、まだ、マーカーの色は青で、green.Anyのヘルプを変更しなかった

+0

私は上記の質問がマーカークラスターの色にあります。私の質問はマーカークラスターの色ではなく個々のマーカーそのものです。私が間違っていれば私を正す? – Ricky

+1

こんにちは、私はあなたが正しいと思います。マーカーの更新に関する素晴らしい記事があります。クラスタ内のマーカーに適用する必要があります。http://stackoverflow.com/questions/7095574/google-maps-api-3-custom-marker-color-for-default-ドットマーカ –

+0

私の質問が更新されました[チュートリアル](https://github.com/pointhi/leaflet-color-markers)に従っていますが、期待通りに動かなかったのですか? – Ricky

答えて

2

を高く評価され、実際、これはトリックをした:

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); 

希望があれば誰でも助けてください

関連する問題