Question

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

问题：由于地图上绘制了大量标记，每次用户更改地图边界（拖动，缩放...）时， ALL 标记被删除，检索并再次添加，导致相当大的延迟，主要是由于绘制了新的标记（我认为）。很多时候，用户只需稍微改变界限，就可以重新添加75％的标记。

为了加快速度，我决定在bounds_changed事件中，地图应该只清除现在绑定到地图边界的标记，然后下载并添加现在位于地图边界内的新标记。怎么办呢？

其他信息：我有一个数组markers[]，其中所有新创建的标记都是pushed到

Answer 1

我建议你看看MarkerManager Library

这可以帮助你，你将避免推出自己的解决方案。

Answer 2

首先，当用户平移地图时，bounds_changed事件会不断触发。你应该在事件处理程序中做这样的事情：

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

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

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

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

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

PS！您还应该遵循skarE关于使用idle事件而不是bounds_changed的建议。

PPS！当谈到在地图中显示标记时，MarkerManager是个好主意。如果您想将具有高标记密度的区域中的标记组合成簇组，我还建议使用MarkerClusterer（http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/reference.html）。

向现有标记集添加新的唯一标记（Google地图）

2 个答案: