Question

我试图在带有点的地图上的弹出窗口中显示geojson文件中的两个属性。

以下是geojson文件中一项的示例：

{ "type": "Feature", "properties": { "LONG": 144.760809, "LAT": -37.866606, "STOP_ID": 19924, "STOP_NAME": "Aircraft  ", "2016_17_PATRONAGE": 294702, "2016_17_PATRONAGE_DAILY": 805.2, "METRO": "Yes" }, "geometry": { "type": "Point", "coordinates": [ 144.760809, -37.866606 ] } },

我试图在同一弹出窗口中同时显示STOP_NAME和2016_17_PATRONAGE_DAILY属性。

我尝试查看this example和this example，但两种方法似乎都不起作用。

到目前为止，这是我的代码（有效）：

map.on('click', 'layername', function (e) {
    var coordinates = e.features[0].geometry.coordinates.slice();
    var name = e.features[0].properties.STOP_NAME;

    new mapboxgl.Popup()
    .setLngLat(coordinates)
    .setHTML(name)
    .addTo(map);
});

我使用上面的示例尝试了这段代码：

map.on('click', 'layername', function (e) {
    var coordinates = e.features[0].geometry.coordinates.slice();
    var name = e.features[0].properties.STOP_NAME;
    var patronage = e.features[0].properties.2016_17_PATRONAGE;

    new mapboxgl.Popup()
    .setLngLat(coordinates)
    .setHTML(name) + ' (' + properties.2016_17_PATRONAGE + ')')
    .addTo(map);
});

这不起作用，我收到一条消息：“ SyntaxError：标识符在数字文字之后立即启动”

我对Mapbox-GL-JS还是很陌生，希望能对您有所帮助。

Answer 1

您是如此亲密。只需更改setHTML行以包含引用这两个属性的表达式即可：

.setHTML(e.features[0].properties.STOP_NAME + ' (' + e.feature[0].properties.2016_17_PATRONAGE + ')')

为了方便起见，我倾向于这样做：

var p = e.features[0].properties;

所以这将是：

.setHTML(p.STOP_NAME + ' (' + p.2016_17_PATRONAGE + ')')

如何使用Mapbox-GL在弹出窗口中显示多个geojson属性？

1 个答案: