草庐IT

关于 javascript:Mapbox GeoJSON 通过本地 URL 加载：图标不显示弹出属性

codeneng 2023-03-28 原文

Mapbox GeoJSON loaded via local URL: icons not showing popup properties

在我的网站中，我使用 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);
}

通过 /updatedIcons 加载的图标会显示出来，但它们不可点击。我使用这个 SO 帖子解决了可点击性问题。但是，当我单击图标时，通过 /updatedIcons 调用检索到的每个功能(图标)的属性仍然不会显示为弹出窗口(单击图标时没有任何反应)。请注意，在 Mapbox 网站上为 somemap 用户创建的图标确实会显示在地图上，并且它们是可点击的，并且会在同一张地图上愉快地为他们显示一个弹出窗口。

这是我通过 /updatedIcons:

加载的 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]
                  })
              });

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

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

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

要向 featureGroup 添加(或绑定)弹出窗口，您将需要类似这样的内容

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 支持人员的回复直接回答了我的问题(即，为什么我的属性不显示？)，但 Mapbox 支持人员没有在这里回复。如果他在这里回复，我会接受他的回答，但对于在这里寻找我的问题答案的人来说，答案如下。如果他在本周末之前没有回复 SO，我会接受你的回答。

这是来自 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

javascriptGeoJSONspanclassquotcssgeojsonmapbox

有关关于 javascript:Mapbox GeoJSON 通过本地 URL 加载：图标不显示弹出属性的更多相关文章

  1. ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2

    我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib

  2. ruby - 通过 rvm 升级 ruby​​gems 的问题 - 2

    尝试通过RVM将RubyGems升级到版本1.8.10并出现此错误:$rvmrubygemslatestRemovingoldRubygemsfiles...Installingrubygems-1.8.10forruby-1.9.2-p180...ERROR:Errorrunning'GEM_PATH="/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/ruby-1.9.2-p180@global:/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/rub

  3. ruby - 使用 C 扩展开发 ruby​​gem 时，如何使用 Rspec 在本地进行测试？ - 2

    我正在编写一个包含C扩展的gem。通常当我写一个gem时，我会遵循TDD的过程，我会写一个失败的规范，然后处理代码直到它通过，等等......在“ext/mygem/mygem.c”中我的C扩展和在gemspec的“扩展”中配置的有效extconf.rb，如何运行我的规范并仍然加载我的C扩展？当我更改C代码时，我需要采取哪些步骤来重新编译代码？这可能是个愚蠢的问题，但是从我的gem的开发源代码树中输入“bundleinstall”不会构建任何native扩展。当我手动运行rubyext/mygem/extconf.rb时，我确实得到了一个Makefile(在整个项目的根目录中)，然后当

  4. ruby - 通过 erb 模板输出 ruby​​ 数组 - 2

    我正在使用puppet为ruby​​程序提供一组常量。我需要提供一组主机名，我的程序将对其进行迭代。在我之前使用的bash脚本中，我只是将它作为一个puppet变量hosts=>"host1,host2"我将其提供给bash脚本作为HOSTS=显然这对ruby​​不太适用——我需要它的格式hosts=["host1","host2"]自从phosts和putsmy_array.inspect提供输出["host1","host2"]我希望使用其中之一。不幸的是，我终其一生都无法弄清楚如何让它发挥作用。我尝试了以下各项:我发现某处他们指出我需要在函数调用前放置“function_”……这

  5. ruby - 如何在续集中重新加载表模式？ - 2

    鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende

  6. ruby-on-rails - rails : save file from URL and save it to Amazon S3 - 2

    从给定URL下载文件并立即将其上传到AmazonS3的更直接的方法是什么(+将有关文件的一些信息保存到数据库中，例如名称、大小等)？现在，我既不使用Paperclip，也不使用Carrierwave。谢谢 最佳答案 简单明了:require'open-uri'require's3'amazon=S3::Service.new(access_key_id:'KEY',secret_access_key:'KEY')bucket=amazon.buckets.find('image_storage')url='http://www.ex

  7. ruby - 如何使用 Ruby aws/s3 Gem 生成安全 URL 以从 s3 下载文件 - 2

    我正在编写一个小脚本来定位aws存储桶中的特定文件，并创建一个临时验证的url以发送给同事。(理想情况下，这将创建类似于在控制台上右键单击存储桶中的文件并复制链接地址的结果)。我研究过回形针，它似乎不符合这个标准，但我可能只是不知道它的全部功能。我尝试了以下方法:defauthenticated_url(file_name,bucket)AWS::S3::S3Object.url_for(file_name,bucket,:secure=>true,:expires=>20*60)end产生这种类型的结果:...-1.amazonaws.com/file_path/file.zip.A

  8. ruby - 通过 ruby​​ 进程共享变量 - 2

    我正在编写一个gem，我必须在其中fork两个启动两个webrick服务器的进程。我想通过基类的类方法启动这个服务器，因为应该只有这两个服务器在运行，而不是多个。在运行时，我想调用这两个服务器上的一些方法来更改变量。我的问题是，我无法通过基类的类方法访问fork的实例变量。此外，我不能在我的基类中使用线程，因为在幕后我正在使用另一个不是线程安全的库。所以我必须将每个服务器派生到它自己的进程。我用类变量试过了，比如@@server。但是当我试图通过基类访问这个变量时，它是nil。我读到在Ruby中不可能在分支之间共享类变量，对吗？那么，还有其他解决办法吗？我考虑过使用单例，但我不确定这是

  9. ruby - 通过 RVM (OSX Mountain Lion) 安装 Ruby 2.0.0-p247 时遇到问题 - 2

    我的最终目标是安装当前版本的RubyonRails。我在OSXMountainLion上运行。到目前为止，这是我的过程:已安装的RVM$\curl-Lhttps://get.rvm.io|bash-sstable检查已知(我假设已批准)安装$rvmlistknown我看到当前的稳定版本可用[ruby-]2.0.0[-p247]输入命令安装$rvminstall2.0.0-p247注意:我也试过这些安装命令$rvminstallruby-2.0.0-p247$rvminstallruby=2.0.0-p247我很快就无处可去了。结果:$rvminstall2.0.0-p247Search

  10. ruby-on-rails - Enumerator.new 如何处理已通过的 block ？ - 2

    我在理解Enumerator.new方法的工作原理时遇到了一些困难。假设文档中的示例:fib=Enumerator.newdo|y|a=b=1loopdoy[1,1,2,3,5,8,13,21,34,55]循环中断条件在哪里，它如何知道循环应该迭代多少次(因为它没有任何明确的中断条件并且看起来像无限循环)？ 最佳答案 Enumerator使用Fibers在内部。您的示例等效于:require'fiber'fiber=Fiber.newdoa=b=1loopdoFiber.yieldaa,b=b,a+bendend10.times.m

随机推荐