传单：不同坐标的不同颜色标记答案

【问题标题】：Leaflet: Different color markers for different coordinates传单：不同坐标的不同颜色标记
【发布时间】：2015-01-20 06:46:11
【问题描述】：

我正在使用 Leaflet 制作交互式地图。我在地图上有标记（基于它们的经度和纬度坐标），我希望一些标记的颜色与其他标记不同。例如，一些坐标我给它的分数是“10”，我希望它是粉红色的，而其他标记的分数是“5”，我想给标记它们有红色。

我有一个 marker.js 文件：

var myIcon = L.icon({
  iconUrl: 'icon_ping.png',
  iconSize: [20, 15],
  iconAnchor: [5, 23],
  popupAnchor: [0, -11]
});


for ( var i=0; i < markers.length; ++i ) 
{
 L.marker( [markers[i].lat, markers[i].lng], {icon: myIcon} )
  .bindPopup( '<a target="_blank">' + markers[i].name + '<br>' + markers[i].address + '<br>' +'Score: ' + markers[i].score + '</a>' )
  .addTo( map );
}

我还有一个包含坐标和我的分数的坐标.json 文件

markers = [
    {
     "name": "Place",
     "address": "123, TX",
     "score": "10",
     "lat": 12.123,
     "lng": 23.234
    }

    ...

];

基本上我只是希望相同分数的标记具有相同的颜色标记。我在想我需要创建另一个 var myIcon_2 并在 for 循环中放置一个 if 语句？这会起作用还是有另一种更好的方法来解决这个问题？

谢谢。

【问题讨论】：

是的，您所描述的方式就是这样做的方式:)

标签： javascript json leaflet

【解决方案1】：

您描述的方式就是这样做的方式。但是为避免重复大量代码等，您应该使用三元运算符来定义图标，即：

var myIcon = L.icon({
    iconUrl: 'icon_ping.png',
    iconSize: [20, 15],
    iconAnchor: [5, 23],
    popupAnchor: [0, -11]
  }),
  myIcon2 = L.icon({
    iconUrl: 'icon_ping2.png',
    iconSize: [20, 15],
    iconAnchor: [5, 23],
    popupAnchor: [0, -11]
  });


for ( var i=0; i < markers.length; ++i ) 
{
    var icon = markers[i].score === 10 ? myIcon2 : myIcon;

     L.marker( [markers[i].lat, markers[i].lng], {icon: icon} )
       .bindPopup( '<a target="_blank">' + markers[i].name + '<br>' + markers[i].address + '<br>' +'Score: ' + markers[i].score + '</a>' )
       .addTo( map );
}

【讨论】：