Question

在我的网站上，我使用Mapbox地图从如下所示的网址加载图标：

/* 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调用检索到的每个功能（图标）的属性仍然不会显示为弹出窗口（单击图标时没有任何反应）。请注意，somemap用户在Mapbox网站上创建的图标会显示在地图上，并且可以点击，并且会在同一个地图上为他们显示。

以下是通过/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加载基本地图，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

通过本地URL加载的Mapbox GeoJSON：不显示弹出属性的图标

2 个答案: