Leaflet 如何异步更新featureLayer？

我正在尝试动态更改地图上的标记层，而无需用户重新加载页面。当用户第一次访问我的页面时，他们会看到一张地图，上面有一些表示不同位置的标记。我希望用户能够单击一个按钮并异步更改标记层。例如，当他们第一次访问该页面时，它将向他们显示餐厅列表，但当他们单击“咖啡”按钮时，咖啡店的标记层将替换餐厅标记层。当用户第一次访问我的页面时，我有如下负载（工作正常）：

下面的函数应该用来更改我地图上的featureLayer，但它不起作用。也就是说，触发此函数时不会发生任何事情。我做错了什么

<button type="button" onclick="showNewFeatureLayer()">Coffee Shops</button>
<div id="map"></div> // contains the MapBox map

function showNewFeatureLayer() {
    var features = [{
        type: 'Feature',
        properties: {
            description: "Another Place",
            'marker-size': 'large' 
        },
        geometry: {
            type: 'Point',
            coordinates: [74.23456, 35.23456]
        }
        ...
    }];
    var geoJson = {
        type: 'FeatureCollection',
        features: features
    };
    map.featureLayer.setGeoJSON(geoJson);
}

咖啡店
//包含映射框映射
函数showNewFeatureLayer（）{
变量特征=[{
键入：“功能”，
特性：{
描述：“另一个地方”，
“标记大小”：“大”
},
几何图形：{
键入：“点”，
座标：[74.23456，35.23456]
}
...
}];
var geoJson={
类型：“FeatureCollection”，
特色：特色
};
map.featureLayer.setGeoJSON（geoJson）；
}

我怀疑这可能与MapBox在iFrame中渲染地图这一事实有关。然而，我看到其他站点异步显示不同的featureLayers，所以我知道这是可能的。我只是想不通

我怀疑这可能与MapBox在iFrame中渲染地图这一事实有关

因此，有两种方法可以使用Mapbox嵌入地图：如果您想使用Mapbox.js执行类似的操作，您不应该使用iframe路径，或者我们称之为“嵌入”：您应该复制示例的完整代码，并在

元素中实例化地图。从你发布的代码来看，你已经差不多做到了——你只需要在你的页面上创建

，并使用CSS使其变大——你可以从中复制这两个

线路也有问题：

map = L.mapbox.map('map', ''myname.12345')

---

在

myname

之前有两个

”

s，这将破坏代码。要捕获这样的错误，您需要启用。

作为改进，我建议您：1）存储地理编码的LatLng数据。每个地理编码器都有一个查询限制，并且通常坐标不会改变。2） 将异步接收的每个数据存储在FeatureGroup/LayerGroup中。当用户重新更改时（例如，从咖啡恢复到餐馆），您不必重新加载所有数据，只需更改显示的图层即可。

map = L.mapbox.map('map', ''myname.12345')