谷歌地图上太多图钉的最佳解决方案

2024-05-26

这是我的 Google 地图“设置”

  • 我从数据库中读取了所有标记的位置(低于 300) - 将它们作为 Json 发送到 javascript
  • 在 javascript 上,我解析 json,查看标记数组并创建一个新的 google.maps.Marker。对于每个标记,我添加一个 clicl 事件,它将打开一个包含主图片和一些自定义详细信息的信息框(infoBox.js)。之后我创建集群(使用 MarkerClusterer)并且一切正常(至少对于 3-400 个标记)

我想扩展并显示最多 10k 个标记(使用 MarkerClusterer)。最好的方法是什么?

我正在考虑将所有标记数据写入一个文件(作为 javascript 数组或 xml),并从那里读取 javascript,因为在数据库中查询 10k 个位置是不切实际的。你有其他建议吗?

我应该使用相同的循环槽数组并一次放置一个标记吗? 我查看了 kml 图层,但似乎我无法导航槽标记(我有上一个/下一个位置功能)并且我可能无法使用 infobox.js ?

有什么建议吗?


正如 @geocodezip 提到的,请查看该文档,而不是查看 Cluster 解决方案,请查看视口标记管理 https://developers.google.com/maps/articles/toomanymarkers#viewportmarkermanagement部分。

如果您的数据库支持地理空间查询,您可以请求在地图发布后仅返回给定范围内的标记。idle.

google.maps.event.addListener(map, 'idle', function(){
    var bounds = map.getBounds(); //returns an object with the NorthEast and SouthWest LatLng points of the bounds

    //make the AJAX request passing in your `bounds`

    /*in the AJAX callback remove the current markers from the map and the cluster object, 
    and add the new ones along with their event handlers and re-add to the cluster object as well*/

});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

谷歌地图上太多图钉的最佳解决方案 的相关文章

  • 将鼠标悬停时的鼠标光标更改为锚状样式

    如果我将鼠标悬停在div鼠标光标将更改为 HTML 锚点中的光标 我怎样才能做到这一点 假设你的div has an id myDiv 将以下内容添加到您的 CSS 中 这cursor pointer指定光标应与用于锚点 超链接 的手形图标
  • Javascript 函数查找数字的倍数

    创建一个名为的函数multiplesOf 它将接受两个参数 第一个参数是数字数组 第二个参数是数字 该函数应返回一个新数组 该数组由参数数组中的每个数字组成 该数字是参数数字的倍数 So multiplesOf 5 6 7 8 9 10 3
  • socket.io 的良好初学者教程? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 谷歌地图初始化无法使用选项卡

    我正在尝试在选项卡单击事件上初始化 Google 地图 因为目前我得到的地图如下 My Code function render map This function will render a Google Map onto the sel
  • 如何使用javascript将大图像转换为十六进制?

    如果我尝试将图像转换为十六进制 无论我使用哪个函数 我都会收到此错误消息 该图像的大小为 7 MB 19812 毫秒 清理 1401 2 1455 0 gt 1401 2 1455 0 MB 9 9 0 ms 自上次 GC 以来 8 3 m
  • 如何将内联 JavaScript 与 Express/Node.js 中动态生成的内容分开?

    对于具有几年 Web 开发经验但没有找到答案的人来说 这是一个有点菜鸟的问题程序员堆栈交换 or Google 我决定在这里问一下 我在用Express网络框架Node js 但这个问题并不特定于任何 Web 框架或编程语言 以下是从数据库
  • 在打字稿中导入 json

    我是 typescript 的新手 在我的项目中 我们使用 typescript2 在我的要求之一中 我需要导入 json 文件 所以我创建了 d ts 文件如下 test d ts declare module json const va
  • React-Redux:state.setIn() 和 state.set() 有什么区别?

    我见过使用setIn and set 在一些react redux代码中 state setIn state set 我在这里找到了一些文档https facebook github io immutable js https facebo
  • Javascript split 不是一个函数

    嘿朋友们 我正在使用 javascript sdk 通过 jQuery facebook 多朋友选择器在用户朋友墙上发布信息 但是我收到此错误friendId split 不是函数 这是我的代码 function recommendToFr
  • DataTables row.add 到特定索引

    我正在替换这样的行项目 var targetRow entity row dataTable targetRow closest table dataTable DataTable dataTable row targetRow remov
  • Firebase 函数 onWrite 未被调用

    我正在尝试使用 Firebase 函数实现一个触发器 该触发器会复制数据库中的一些数据 我想观看所有添加的内容votes user vote 结构为 我尝试的代码是 const functions require firebase func
  • 从数据库检查数据的异步解决方案各种循环子句

    我想要做的是异步检查数据库并从中获取结果 在我的应用程序中我试图实现Asynchronously将此步骤解决为 从数据库中检查手机号码JsonArray循环子句的种类 Create JsonArray从结果 打印创建的数组 我学到了足够多的
  • Vue 和 Vuex:处理依赖的计算属性

    我的应用程序是一个使用 Vuex 在 Vue 中构建的精简电子表格 关键组件是TableCollection Table and Row The TableCollection有一个包含多个的数组Table对象 每个Table有一个包含多个
  • 代码镜像错误:未捕获错误:扩展集中无法识别扩展值([对象对象])

    全部 我目前正在从事一个React Electron项目 该项目的目标是完成一个Markdown编辑器 当我配置codemirror 该程序报告错误说 Uncaught Error Unrecognized extension value
  • 对于只触及我的工作表的 Google 表格脚本,收到“此应用程序未经验证”

    我正在编写一个 Google Sheets 脚本 我只想访问与 gs 文件关联的同一电子表格中的数据 似乎我应该有权在自己的电子表格中运行脚本 但是每当我运行一个函数时 我都会得到一个This app isn t verified信息 我该
  • 在 Shopify 商店中嵌入 Vue 组件

    在产品页面中 我尝试显示自定义 Vue 组件 为简洁起见 该组件根据给定的产品 ID 显示 Firebase 数据库中的一些信息 我最初尝试将其制作为 Shopify 应用程序 以便我可以访问他们的 API 我实现了 OAuth 并且可以检
  • 带参数的事件监听器

    我想将参数传递给 JavaScript 中的事件侦听器 我已经找到了解决方案 但我无法理解它们为什么或如何工作以及为什么其他解决方案不起作用 我有 C C 背景 但是 Javascript 函数的执行有很大不同 您能否帮助我理解以下示例如何
  • 使用 MongoDB 和 Nodejs 插入和查询日期

    我需要一些帮助在 mongodb 和 nodejs 中按日期查找记录 我将日期添加到抓取脚本中的 json 对象 如下所示 jsonObj last updated new Date 该对象被插入到 mongodb 中 我可以看到如下 la
  • Jquery - 选择选项后如何获取选项的特定数据类型?

    我将直接跳到标记 然后解释我想要做什么 HTML 选择选项
  • 如何确定所有角度2分量都已渲染?

    当所有 Angular2 组件完成渲染时 是否会触发一个角度事件 For jQuery 我们可以用 function 然而 对于 Angular2 当domready事件被触发 html 只包含角度组件标签 每个组件完成渲染后 domrea

随机推荐

  • 在 Windows 上从源代码构建 PhantomJS-2

    我正在尝试基于这些在 Windows 8 1 x64 上从源代码构建 PhantomJS 2 的开发版本指示 https github com ariya phantomjs wiki PhantomJS 2 但是我收到以下错误 mingw
  • 如何在方法模板中使用模板类型的引用传递参数?

    我目前正在努力编译以下代码 首先是包含带有方法模板的类的头文件 ConfigurationContext h class ConfigurationContext public template
  • 起订量工作单元

    我是单元测试的新手 我想为我的搜索功能创建一个测试 我的服务层看起来像 public class EmployeeService BaseService IEmployeeService public EmployeeService IUn
  • 获取不带波形符的泛型类名称[重复]

    这个问题在这里已经有答案了 我正在尝试获取类型名称T使用这个 typeof T Name 班级名称是ConfigSettings 而不是返回ConfigSettings它正在返回ConfigSettings 1 有什么具体原因吗 我怎样才能
  • 如何修复 TcpClient Ip 标头错误校验和

    我正在使用 System Net Sockets TcpClient 类 但每当我通过网络发送自定义数据包时 我都会在wireshark捕获上看到错误的校验和 我该如何修复它 问题是您在网络接口上设置了校验和卸载 这会导致您的网卡计算校验和
  • 如何获取 PropertyGrid 的单元格值 (c#)?

    如何在 C 中获取属性网格项和项的值 例如 Name Ali LastName Ahmadi Name 和 LastName 是 propertygrid 的 2 个属性 PropertyGrid只是对象的组件模型表示的视图 我会说 查看组
  • 无法转换“String!”类型的值预期参数类型错误

    我有一个公共职能 public func lastActivityFor userName String gt String 后来我想将其称为 OneLastActivity lastActivityFor username 但最后一行出现
  • 错误:找不到符号 ArrayList

    我正在尝试创建某种列表来存储数组 表 中的值 我在这里使用数组列表 但我应该使用列表吗 但是 每次我尝试编译时 它都会引发以下错误 找不到标志 符号 ArrayList类 位置 玩家类 TablePlayer 代码如下 public cla
  • FPC:RTTI 记录

    这是我第一次访问这个网站 通常 我可以毫无问题地在旧帖子中找到回复 但我无法成功解决我的实际问题 我想知道如何使用 RTTI 函数在运行时了解 Lazarus FPC 下记录的属性 成员 我知道如何为类 Tpersistent 后代和已发布
  • 序列化 Django Rest 框架时的附加字段

    我是 django 休息框架的新手 并创建了一个示例Employee model My 模型 py class Employees models Model created models DateTimeField auto now add
  • Ruby,通过 SSH 和 LOG 逐一运行 linux 命令

    我想用 Ruby 女巫 net ssh 编写代码 在远程 Linux 机器上一一运行命令并记录所有内容 在 Linux 机器上称为命令 stdout 和 stderr 所以我写函数 def rs ssh cmds cmds each do
  • 使用 pywin32com 进行 opc 的内存泄漏

    我很难弄清楚如何解决内存泄漏问题 我认为这可能是 pywin32 的问题 但我不完全确定 我用于读取 写入单个项目的代码似乎工作得很好 但是当使用组函数时 它会慢慢泄漏内存 我怀疑这是来自必须在 server handles 中传递的基于
  • Node Js - 识别请求是来自移动设备还是非移动设备

    我对 Node js 还是个新手 是否有任何解决方法或方法如何使用 Node js 识别来自客户端的请求是来自移动设备还是非移动设备 因为我现在正在做的是我想根据设备类型 移动 桌面 限制对某些 API 的访问 我在服务器端使用restif
  • 如何使用networkx删除有向图中的所有相关节点?

    我不确定我的问题的正确术语是什么 所以我只会解释我想做的事情 我有一个有向图 删除节点后我希望所有独立相关的节点也被删除 这是一个例子 假设我删除节点 11 我希望节点 2 也被删除 在我自己的示例中 它们将是 2 以下的节点 现在也必须删
  • html div位置和显示

    Hi 我正在尝试设计一个网站 使用 5 个不同的 div 如上所示 A 是标题 背景图像 重复 x B 是导航栏 1 div 内的图像 应具有 100 高度 C 是内容面板 div 应该是页面滚动期间唯一移动的部分 D 是页脚 div 应始
  • Java 堆分析因 SIGABRT 崩溃

    我正在尝试分析由 C 编写的方法分配并插入的本机内存JVM通过JNI 我安装了 valgrind version valgrind 3 13 0 并尝试使用以下选项运行 JVM valgrind tool massif massif out
  • 用于轻松动态反射的 C# 库

    是否有任何库 例如开源项目等 可以更轻松地使用复杂的反射 例如动态创建对象或类 检查实例等 Thanks 有一个LinFu http www codeproject com KB cs LinFuPart1 aspx可用的库除了反射之外还可
  • 树莓派上的 /dev/mem 访问被拒绝

    我正在使用我的 Raspberry Pi 并且正在编写一个 cgi python 脚本 该脚本创建一个网页来控制我的 gpio 输出引脚 当我尝试将 RPi GPIO 作为 GPIO 导入时 我的脚本崩溃了 这是我收到的错误 File co
  • 使用 div 标签定位元素

    div class HeaderLink div class HeadPanelElement a href Blog a div div
  • 谷歌地图上太多图钉的最佳解决方案

    这是我的 Google 地图 设置 我从数据库中读取了所有标记的位置 低于 300 将它们作为 Json 发送到 javascript 在 javascript 上 我解析 json 查看标记数组并创建一个新的 google maps Ma