javascript - 根据 Leaflet 中的属性更改标记颜色

Question

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

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