通过本地网址加载的Mapbox GeoJSON：图标未显示弹出窗口属性

Question

在我的网站上，我正在使用Mapbox映射从如下采购的URL加载图标：

/* myMapbox.js */
map = L.mapbox.map("map", "somemap.hhlj93e3").setView([47.60,-122.33], 13);
...
.someAjaxCall{

   allMyIcons = L.mapbox.featureLayer ().loadURL ("/updatedIcons");
   allMyIcons.addTo (map);
}

确实显示了通过/updatedIcons加载的图标，但它们不可单击。 我使用此SO post解决了可点击性问题。 但是，通过/updatedIcons调用检索的每个功能（图标）的属性在单击图标时仍不会显示为弹出窗口（单击图标时没有任何反应）。 请注意，在Mapbox站点上为somemap用户创建的图标的确显示在地图上，并且它们是可单击的，并且在同一地图上为它们高兴地显示一个弹出窗口。

这是通过/updatedIcons加载的我的GeoJSON的示例：

[{
"type": "Feature",
"geometry": { "type": "Point", "coordinates": [-77.03, 38.90]},
"properties": {
    "image":   "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Cherry_Blossoms_and_Washington_Monument.jpg/320px-Cherry_Blossoms_and_Washington_Monument.jpg",
    "url": "https://en.wikipedia.org/wiki/Washington,_D.C.",
    "marker-symbol": "star",
    "city": "Washington, D.C."
}
}, {
"type": "Feature",
"geometry": { "type": "Point", "coordinates": [-87.63, 41.88]},
"properties": {
    "image": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Chicago_sunrise_1.jpg/640px-Chicago_sunrise_1.jpg",
    "url": "https://en.wikipedia.org/wiki/Chicago",
    "city": "Chicago"
}
}, {
"type": "Feature",
"geometry": { "type": "Point", "coordinates": [-74.00, 40.71]},
"properties": {
    "image": "https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/NYC_Top_of_the_Rock_Pano.jpg/640px-NYC_Top_of_the_Rock_Pano.jpg",
    "url": "https://en.wikipedia.org/wiki/New_York_City",
    "city": "New York City"
}
}]

我在这里想念什么？ 只是为了清楚起见，这些图标出现了，但是直到我添加了链接的SO文章中提到的CSS改进之后，这些图标才可以单击，现在，我可以单击这些图标，但是什么也没发生（属性不会显示在弹出）。 我了解上面的GeoJSON示例是FeatureCollection，并且将上面的示例包含在

{ "type": "FeatureCollection",
  "features": <content from above GeoJSON here>
}

但这并没有改变行为。 这是分层问题吗？ 如果是这样，如何合并地图中的所有图层？ 我将从Mapbox加载基础地图，该地图是由用户创建的标记，我想使用该标记进行渲染

       marker = L.marker ([lat, lng],
              {
                  icon: L.divIcon ({
                  iconSize: [10, 10]
                  })
              });

以及从上面的/updatedIcons加载的图标，所有这些我都希望可以单击。

任何帮助表示赞赏。 谢谢！

Answer 1

L.mapbox.featureLayer继承自L.mapbox.featureGroup 。

要将弹出窗口添加（或绑定）到featureGroup您将需要以下内容

allMyIcons = L.mapbox.featureLayer().loadURL("/updatedIcons");
allMyIcons.bindPopup("Howdy!");
allMyIcons.addTo(map);

如果您希望每个标记/图标都有自己的唯一弹出窗口，则可以像这样遍历它们，并在迭代时添加唯一弹出窗口

allMyIcons.eachLayer(function (layer) {
layer.bindPopup('Howdy: ' + count);
    count += 1;
});

Answer 2

这是Mapbox支持的回复：

您在地图上看到的弹出窗口是根据特定属性设置格式的-默认情况下，这些属性是“标题”和“说明”。 没有这些默认属性的功能不会自动获得默认弹出窗口，因为代码不知道是什么意思-是将某些内容显示为标题还是描述，还是图像不清楚。 由于数据不包含默认属性，因此您必须指定如何使用bindPopup设置工具提示的格式，例如： https ://www.mapbox.com/mapbox.js/example/v1.0.0/omnivore- kml-tooltip / http://leafletjs.com/reference.html#marker-bindpopup