根据传单中的属性更改标记颜色

Question

我的目标是根据标记的rating属性使标记具有三种不同的颜色。我看过类似的帖子，其中使用对象来定义颜色。每个标记都有一个rating介于 1 到 5 之间的属性。

我正在考虑使用 else if 语句，例如

if (rating < 3) {
    markerColor: 'red'
} else if (rating = 3 ) {
    markerColor: 'orange'
} else {
    markerColor: 'green'
}

我正在按如下方式创建标记：

for (var i = 0; i < data.length; i++)   {

    var customOptions = {
        'maxWidth': '500',
        'className' : 'custom'
    };

    //Custom icon
    var blueMarker = L.AwesomeMarkers.icon({
        markerColor: 'blue'
    });

    //Create markerLocation variable    
    var markerLocation = new L.LatLng(data[i].lat, data[i].lon);

    //Create marker variable
    var marker = new L.Marker(markerLocation, {icon: blueMarker});

    marker.bindPopup("<p><h2>Rating:</h2> " + data[i].rating_value,
                     customOptions);
}

分配 blueMarker 变量时是否会使用 else if 语句？

谢谢

我用了

  var = customColour = "green";

  if (data[i].rating_value < 3)
    customColor = "red";
  else if (data[i].rating_value === 3)
    customColor = "orange";

//Create custom icon
  var customMarker = L.AwesomeMarkers.icon({
  markerColor: customColour
  });

//Create markerLocation variable    
  var markerLocation = new L.LatLng(data[i].lat, data[i].lon);

//Create marker variable
  var marker = new L.Marker(markerLocation, {icon: customMarker});

然而，AwesomeMarkers 插件只接受颜色，所以我认为使用 customColour 不起作用。https://github.com/lvoogdt/Leaflet.awesome-markers。谢谢

Answer 1

您可以使用条件语句来确定传递到属性中的值markerColor。在下面的示例中，我将确定的颜色存储在名为 的变量中customColor：

var customColor = "green";

if (rating < 3)
  customColor = "red";
else if (rating === 3)
  customColor = "orange";

var blueMarker = L.AwesomeMarkers.icon({
  markerColor: customColor
});