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

Question

我正在使用 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 );
}

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

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

    ...

];

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

谢谢。

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

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

Leaflet: Different color markers for different coordinates

javascript

json

leaflet