javascript - 在传单中动态设置图标值的语法问题

标签 javascript leaflet

我有一个 Leaflet map ,显示来自 geojson feed 的图钉。我希望能够根据 geojson 中的属性设置自定义图标,该属性可以具有三个值之一,比如绿色、橙色、红色,每个值都有预定义的自定义图标。

如果我设置

return L.marker(latlng, {icon: Red});

它工作正常,但如果我设置

return L.marker(latlng, {icon: feature.icon});

验证了 feature.icon 的值为 Red,它不起作用,并返回“Uncaught TypeError: Cannot read property 'popupAnchor' of undefined”,该行与下面相当多的一行相关,该行将弹出窗口绑定(bind)到层。

我不禁认为这是一个简单的语法错误,但无法确切地弄清楚我应该如何做到这一点。

我尝试了单引号和双引号的各种组合,但没有成功。

更新:感谢下面的评论和回答,我意识到我的想法是错误的。我将图标作为文本值而不是图标对象传递。因此,排序的逻辑是根据 geojson 中存在的文本值进行测试,并使用它来选择和设置适当的图标。

最佳答案

您必须创建所需的所有 L.Icon 对象,并使用 onEachFeature 回调(请参阅 GeoJson )根据 geojson 属性更改标记图标。

function onEachFeature(feature, layer) {
  if(feature.properties.icon && feature.properties.icon == "Red") { // Red is the text in the property
    layer.setIcon(Red); // Red is the L.Icon object you have created beforehand
  }
}

参见example

关于javascript - 在传单中动态设置图标值的语法问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37753315/

相关文章:

javascript - ElasticSearch AWS请求超时

leaflet - 如何将 Leaflet 集成到 Angular 5 中

leaflet - 将tileLayer放在Leaflet的前面

javascript - Leaflet.Draw编辑和删除按钮不起作用

javascript - React-Leaflet:如何监听LayersControl.Overlay复选框点击事件?

javascript - 未捕获的类型错误 : Cannot read property 'lat' of undefined when serializing leaflet data with $. 参数()

javascript - 找不到模块 "collections/deque"

javascript - Wow + jquery + animate div 在加载时显示然后再次出现

javascript - 为什么相同的 JS 代码不适用于第二个帖子/图像,但适用于第一个帖子/图像?

javascript - 如何使用firebug查看实时JS调用