向现有标记集合（谷歌地图）中添加新的唯一标记

Question

我有一个谷歌地图，通过JSON从PHP脚本检索标记的信息（LatLng等）。在Google地图上存在一个监听器，会删除所有现有的标记，检索bounds_changed上的标记，并将它们添加到地图上。

问题：由于大量标记被绘制在地图上，每次用户改变地图范围（拖动，缩放…），所有标记都会被删除、检索并再次添加，这主要是由于新标记的绘制引起的延迟。很多时候，用户只是稍微更改了下界限，结果可能会重新添加75%左右的标记。

为了加快速度，我决定在bounds_changed 事件中，地图应该仅清除当前地图边界内的标记，然后下载并添加到当前地图边界内的新标记。怎样才能实现这个呢？

额外的信息：我有一个数组markers[]，其中所有新创建的标记都会被pushed进去。

- Nyxynyx

Answer 1

我建议您查看MarkerManager库

这将会帮助您，同时避免自己编写解决方案。

- andresf

---

如果您决定预先加载所有标记，则MarkerManager库是正确的方法。如果您通过ajax查询服务器，则需要使用哈希方法，其中您保留已在地图上的标记集合，然后循环遍历并删除不再需要的标记（即从服务器返回的新查询中不包含的标记），并添加尚未在地图上的标记（以便您不会有重复的标记）。 - skarE

Answer 2

首先，当用户平移地图时，bounds_changed事件会持续触发。您应该在事件处理程序中执行以下操作：

if(reloadTimer){
  clearTimeout(reloadTimer);
}
reloadTimer = setTimeout(function(){
  // fetch new data
}, 400);

其次，如果您可以通过在客户端缓存一些数据来最小化请求的数量，则用户界面可能会更加响应。您可以在客户端缓存相当大量的标记，并仍然保持良好的性能。请记住，如果标记超出可见范围，则应从地图中删除它们，因为它们会影响性能。

您可以通过多种方式在客户端缓存数据，这主要取决于您的用户以及他们如何使用您的应用程序。实现缓存的最快方法是通过一个请求从服务器传输所有数据，并在javascript中创建一个数据结构，地图将从中获取标记。此数据结构将存在于页面范围内，并使地图操作更快。如果您能够将到期标头设置为一定时间，则还可以在浏览器中缓存服务器响应。

如果您的用户返回您的应用程序，则可以使用HTML5将数据结构保存到localStorage或sessionStorage中。也许您可以在用户闲置在您的页面上时定期更新数据。

有关本地存储的更多信息：http://diveintohtml5.info/storage.html

注意！ 你应该遵循skarE的建议，使用idle事件而不是bounds_changed。

另外！ 关于在地图中显示标记，MarkerManager是一个好主意。我还推荐使用MarkerClusterer（http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/reference.html），如果你想将高密度标记区域的标记组合成群集。

- Jørgen

---

你能详细说明一下缓存吗？我不太熟悉缓存标记，谢谢！ - Nyxynyx

不要使用bounds_changes，监听'idle'事件。 - skarE