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

Answer 2

我会使用一个函数，以便您将来可以轻松添加更多键。它看起来像是：

function determineColor(rating) {
  if ( rating < 3) {
    return 'red';
  } else if ( rating === 3 ) {
    return 'orange';
  } else {
    return 'blue';
  }
}

var Marker = L.AwesomeMarkers.icon({
  markerColor: determineColor(rating)
});

同时提醒一个=为变量分配值，===检查是否相等。

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

2 个答案: