无法使用 JS 变量访问带有“：”的 GeoJSON 属性

Question

我目前正在关注 the tutorial on Mapbox 使用地图构建商店定位器。

我在显示从 Turbo Overpass 获得的 GeoJSON 文件中的数据时遇到问题。使用的 GeoJSON 示例：

"properties": {
    "@id": "node/5750820619",
    "addr:city": "Caissargues",
    "addr:housenumber": "180",
    "addr:postcode": "30132",
    "addr:street": "Avenue de la Vistrenque",
    "description:covid19": "horaires légèrement réduits",
    "name": "Bio Marché",
},

在我的 Javascript 文件中，我可以使用以下代码访问名称等属性：

var details = listing.appendChild(document.createElement('div'));
details.innerHTML = prop.addr:city;

...但是我无法弄清楚如何访问 addr:city 或 addr:postcode 字段，因为我要么在 vs 代码中得到一个意外的标识，要么它是 returns 一个未定义的值在网站上。我已经尝试使用 prop.addr:city;、prop.addr/':city'/; 和网站上建议的其他方式。

如果有人能指出正确的方向或提出解决方案，我将不胜感激。谢谢！

Answer 1

您应该像这样访问这些属性：

details.innerHTML = prop['addr:city'];

这是可行的，因为在 Javascript 中，始终可以使用这些括号访问对象属性。

例如这个：

const a = prop.a;

等于

const a = prop['a'];

然而，使用最后一个语法 Javascript 会轻松很多。你甚至可以这样做：

const property = prop['some property with lots of spaces'];

无法使用 JS 变量访问带有“：”的 GeoJSON 属性

Unable to access GeoJSON properties with ":" using JS variable

javascript

openstreetmap

geojson

mapbox