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

我的目标是让我的标记有三种不同的颜色，这取决于它们的

评级

属性。我看过一篇类似的文章，其中一个物体被用来定义颜色。每个标记都有一个介于1和5之间的

rating

属性

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

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

if（额定值<3）{
马克颜色：“红色”
}否则，如果（额定值=3）{
马克颜色：“橙色”
}否则{
标记颜色：“绿色”
}

我正在创建我的标记，如下所示：

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

for（变量i=0；i

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

var=customcolor=“绿色”；
if（数据[i]。额定值<3）
customColor=“红色”；
else if（数据[i]。额定值=3）
customColor=“橙色”；
//创建自定义图标
var customMarker=L.AwesomeMarkers.icon({
标记颜色：自定义颜色
});
//创建markerLocation变量
var markerLocation=new L.LatLng（数据[i].lat，数据[i].lon）；
//创建标记变量
var marker=newl.marker（markerLocation，{icon:customMarker}）；

---

但是AwesomeMarkers插件只接受颜色，所以我认为使用CustomColor不起作用。谢谢

您可以使用条件语句来确定传递到

markerColor

属性中的值。在下面的示例中，我将确定的颜色存储在名为

customColor

的变量中：

var customColor = "green";

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

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

var customColor=“绿色”；
如果（额定值<3）
customColor=“红色”；
否则，如果（评级===3）
customColor=“橙色”；
var blueMarker=L.AwesomeMarkers.icon({
markerColor:customColor
});

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

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

功能确定颜色（额定值）{
如果（额定值<3）{
返回“红色”；
}否则，如果（评级===3）{
返回“橙色”；
}否则{
返回“蓝色”；
}
}
var Marker=L.AwesomeMarkers.icon({
标记颜色：确定颜色（额定值）
});

---

另一个提醒是，

=

为变量赋值，并检查是否相等。

谢谢，

评级

实际上位于

数据[i]的数组中。评级值

，我是否需要创建一个与此相等的变量并使用它？如果你两次引用它，你应该将其存储在变量中，否则，您可以将上面示例中的

评级

替换为该值。所以将var评级=数据[i]。评级值放在代码顶部？谢谢。尽管所有标记都是蓝色的，但该方法仍然有效，即使它们的评级为3或更低。我认为变量赋值不正确。请尝试将评级赋值移动到for循环@stevencol的主体中！如果你喜欢这个答案/它对你有用，请考虑投票/标记正确，谢谢！史蒂文：这是打字错误

customColor

vs

customColor

？