Google Maps V3:只在视口中显示标记 - 清除标记问题

Google Maps API是一个强大的工具,可以轻松地将地图添加到网站中。然而,在处理大量标记时,会遇到一些性能难题。本文将介绍如何使用Google Maps V3 API仅在当前视口中显示标记,并解决清除标记时可能遇到的问题。

显示视口内的标记

默认情况下,Google Maps V3 API会在地图上显示所有标记。当有大量标记时,这会影响地图的渲染速度和性能。因此,我们需要限制只显示当前视口内的标记。

为了实现这个目标,我们可以结合使用 getBounds()contains() 方法。getBounds() 方法返回当前视口的边界框,contains() 方法用于检查一个点是否在给定的边界框内。我们可以将这两个方法连起来,筛选出当前视口内的标记,如下所示:

-------- ------------------ -------- -
  --- ------ - ----------------
  --- ---- - - -- - - --------------- ---- -
    --- ------ - -----------
    -- --------------------------------------- -
      -------------------
    - ---- -
      --------------------
    -
  -
-

上述代码通过 map.getBounds() 获取当前视口的边界框,然后遍历所有标记,通过 marker.getPosition() 获取标记的位置,并使用 contains() 方法检查标记是否在当前视口内。如果标记在视口内,就调用 marker.setMap(map) 显示标记;否则,调用 marker.setMap(null) 隐藏标记。

这样,我们就可以只在当前视口内显示标记了。但是,当地图移动时,我们需要重新过滤标记以获取新的视口内标记。为此,我们可以监听 idle 事件,该事件在地图停止移动并加载完所有标记后触发:

---------------------------------- ------- ---------- -
  ------------------ ---------
---

上述代码通过 addListener() 方法监听 idle 事件,并在事件回调函数中调用 filterMarkers() 方法来重新过滤标记。

清除所有标记

现在,我们已经可以只在当前视口内显示标记了。但是,在清除所有标记时可能会遇到问题。默认情况下,Google Maps V3 API提供了 setMap(null) 方法来从地图上移除标记。然而,这个方法只适用于直接添加到地图上的标记。如果标记是通过数组或其他方式添加到地图上的话,这种方法将无法正常工作。因此,我们需要一种方法来清除所有类型的标记。

为了实现这个目标,我们可以创建一个 clearMarkers() 函数来清除所有标记。首先,我们需要将所有标记存储在一个数组中。然后,在清除标记时,我们遍历该数组并调用 setMap(null) 方法将所有标记从地图上移除。最后,我们可以将数组清空以便下一次使用。

-------- --------------------- -
  --- ---- - - -- - - --------------- ---- -
    ------------------------
  -
  ------- - ---
-

上述代码通过 setMap(null) 方法将每个标记从地图上移除,并将存储所有标记的数组清空。现在,我们可以在需要清除标记的任何时候调用 clearMarkers() 函数。

示例代码

下面是完整的示例代码,包括创建地图、添加标记、过滤标记和清除标记等功能:

--------- -----
------
------
  ------------- ---- --- ---- ---- ------- -- -------- - ----- ------- -------------
  ------- -------------------------------------

- ----------------------------------------------------------- --------
---------------------------------------------------------------------------------------