Question

我正在与Leaflet制作互动地图。我在地图上有标记（基于它们的经度和纬度坐标），我希望一些标记具有与其他标记不同的颜色。例如，我给它一些坐标得分为＆＃34; 10＆＃34;我希望它是粉红色的，而其他标记的得分为＆＃34; 5＆＃34;我想给他们有红色的标记。

我有一个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：不同坐标的不同颜色标记

1 个答案: