使用 AJAX 动态更新 Google 地图答案

【问题标题】：Dynamicaly update Google maps with AJAX使用 AJAX 动态更新 Google 地图
【发布时间】：2012-05-25 22:56:18
【问题描述】：

我的数据库中有很多地址，我想将它们作为标记添加到 Google 地图中。我只想加载和添加地图上选定区域中的标记。如果地图被缩放或拖动，它应该更新地图上的标记。我该怎么做？

提前非常感谢！

【问题讨论】：

标记由谷歌地图在缩放、拖动时自动更新，如果您想更改捕获此事件。

标签： javascript asp.net ajax google-maps

【解决方案1】：

正如 Aristos 所说，标记将在对焦时自动显示。但是，如果我有大量的联系人，那么只有在需要时才这样做确实会更容易。

我的策略是：

跟踪您添加的地址 -- 重复两次没有意义。
从地址获取LatLng。
获取地图的当前边界（使用 getBounds() 获取当前显示地图的最小/最大 LatLng）
检查地址的LatLng是否在边界内。
如果是，添加一个标记。

循环

如果您确实有很多地址，您可能希望预取 LatLng 并将其存储在 SQL 表中。然后，您可以使用间隔查询表。

HTH

编辑：一些代码。假设您有一个 Array() 标记，以及西北和东南边界，您可以这样做：

function filterMarkers(nw, se, myMarkers) {
  var north=nw.lat();
  var west=nw.lng();
  var south=se.lat();
  var east=se.lng();
  var isInsideBounds=[];
  for (var i in myMarkers) {
    if(myMarkers[i].position.lat()>=north && myMarkers[i].position.lat()=<south && myMarkers[i].position.lng()>=west && myMarkers[i].position.lng()=<east) {
      isInsideBounds.push(myMarkers[i]);
    }
  }
  return isInsideBounds;
}

【讨论】：

非常感谢您的回复！您是否知道任何代码示例，显示如何仅加载地图上所选区域的必要标记？
非常感谢您的回复！我的计划是从网络服务中获取标记，然后让网络服务过滤标记。所以我需要告诉网络服务 som 地图上可见区域的信息。据我所知，网络服务的参数是 nw.lat()、nw.lng()、se.lat() 和 se.lng()。但是，在您的示例中，您从哪里确定 nw 和 se？谢谢！

【解决方案2】：

为了管理大量标记，您肯定希望利用已经构建的基础设施来执行此操作。实际上，Google Developers 博客上有一篇很棒的文章讨论了流行的选项。

https://developers.google.com/maps/articles/toomanymarkers

Marker Clusterer 是一个非常常见的组件，当涉及到地图应用程序时，我到处都能看到它，并且似乎符合您正在寻找的要求。我还想看看 Fusion Tables，因为它使构建包含数千个位置的地图变得非常简单。

【讨论】：

感谢您的回复！我已经在使用那个函数了 :-) 但是我正在为源代码中的标记编写所有坐标，它填充了 200 KB。我认为它会更时尚，只是加载地图所示区域中的标记。
查看标题为“视口标记管理”的标题，它讨论了如何使用 Ajax 仅返回当前可视区域中的标记。显然，如果您采用这种方法，您将需要限制应用中的缩放级别。