Mapbox GeoJSON loaded via local URL: icons not showing popup properties在我的网站中,我使用 Mapbox 地图从 URL 加载图标,如下所示:[cc lang=javascri...
在我的网站中,我使用 Mapbox 地图从 URL 加载图标,如下所示:
1 2 3 4 5 6 7 8 | /* 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); } |
通过
这是我通过
加载的 GeoJSON 示例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | [{ "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,我将上面的内容包含在
中
1 2 3 | {"type":"FeatureCollection", "features": <content from above GeoJSON here> } |
但这并没有改变行为。这是分层问题吗?如果是这样,如何合并我地图中的所有图层?我将从 Mapbox 加载基本地图,这是一个由用户创建的标记,我想使用
进行渲染
1 2 3 4 5 6 | marker = L.marker ([lat, lng], { icon: L.divIcon ({ iconSize: [10, 10] }) }); |
以及从上面
任何帮助表示赞赏。谢谢!
要向
1 2 3 | allMyIcons = L.mapbox.featureLayer().loadURL("/updatedIcons"); allMyIcons.bindPopup("Howdy!"); allMyIcons.addTo(map); |
如果您希望每个标记/图标都有自己独特的弹出窗口,您可以像这样循环它们,在迭代时添加独特的弹出窗口
1 2 3 4 | allMyIcons.eachLayer(function (layer) { layer.bindPopup('Howdy: ' + count); count += 1; }); |
这是来自 Mapbox 支持的回复:
您在地图上看到的弹出窗口是根据特定属性格式化的 - 默认情况下,这些属性是 \\'title\\' 和 \\'description\\'。没有这些默认属性的功能不会自动获得默认弹出窗口,因为代码不知道是什么意思 - 是否应该将某些内容显示为标题或描述,或者图像不清楚。由于您的数据不包含默认属性,因此您必须指定工具提示的格式,就像这样,使用 bindPopup:https://www.mapbox.com/mapbox.js/example/v1.0.0/ omn??ivore-kml-tooltip/ http://leafletjs.com/reference.html#marker-bindpopup
本文标题为:关于 javascript:Mapbox GeoJSON 通过本地 URL 加载:图标
基础教程推荐
- ECSHOP中实现ajax弹窗登录功能 2023-01-31
- 第7天:CSS入门 2022-11-04
- 关于 css:WebKit (iPad) CSS3: 背景过渡闪烁 2022-09-21
- vue的 Mixins (混入) 2023-10-08
- 深入浅析Jsonp解决ajax跨域问题 2022-12-28
- ExtJS 3.x DateField menuListeners 显示/隐藏 2022-09-15
- 分页技术原理与实现之无刷新的Ajax分页技术(三) 2023-01-20
- Vue+WebSocket实现在线聊天 2023-10-08
- 解决ajax的delete、put方法接收不到参数的问题方法 2023-02-23
- 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽) 2023-02-01