Question

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

var features = [{
    type: 'Feature',
    properties: {
        description: "A Place",
        'marker-size': 'large' 
    },
    geometry: {
        type: 'Point',
        coordinates: [74.12345, 35.12345]
    }
    ...
}];
var geoJson = {
    type: 'FeatureCollection',
    features: features
};
var geocoder = L.mapbox.geocoder('myname.12345'),
    map = L.mapbox.map('map', ''myname.12345')
    geocoder.query("New York, NY", showMap);
    function showMap(err, data) {
        map.fitBounds(data.lbounds);
    }
    map.featureLayer.setGeoJSON(geoJson);

下面的函数应该更改我的地图上的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);
}

我怀疑它可能与MapBox在iFrame中渲染地图的事实有关。但是，我已经看到其他网站异步显示不同的featureLayers，所以我知道它是可能的。我似乎无法弄明白。

Answer 1

我怀疑它可能与MapBox在iFrame中渲染地图的事实有关。

所以有两种方法可以用Mapbox嵌入地图：如果你想做这样的事情，使用Mapbox.js，你不应该去iframe路线，或者我们称之为'embeds'：你应该复制完整的示例代码并在<div>元素中实例化您的地图。根据您发布的代码，您几乎就在那里 - 您只需要在页面上创建<div id='map'></div>并使用CSS创建一个大小 - 您可以从the simple map example复制这两个。 / p>

该行也存在问题：

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

在'之前有两个myname，这将打破代码。要捕获这样的错误，您需要启用browser debugging tools。

如何异步更新featureLayer？

1 个答案: