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 事件，该事件在地图停止移动并加载完所有标记后触发：
google.maps.event.addListener(map, 'idle', function() {
filterMarkers(map, markers);
});上述代码通过 addListener() 方法监听 idle 事件，并在事件回调函数中调用 filterMarkers() 方法来重新过滤标记。
清除所有标记
现在，我们已经可以只在当前视口内显示标记了。但是，在清除所有标记时可能会遇到问题。默认情况下，Google Maps V3 API提供了 setMap(null) 方法来从地图上移除标记。然而，这个方法只适用于直接添加到地图上的标记。如果标记是通过数组或其他方式添加到地图上的话，这种方法将无法正常工作。因此，我们需要一种方法来清除所有类型的标记。
为了实现这个目标，我们可以创建一个 clearMarkers() 函数来清除所有标记。首先，我们需要将所有标记存储在一个数组中。然后，在清除标记时，我们遍历该数组并调用 setMap(null) 方法将所有标记从地图上移除。最后，我们可以将数组清空以便下一次使用。
function clearMarkers(markers) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = [];
}上述代码通过 setMap(null) 方法将每个标记从地图上移除，并将存储所有标记的数组清空。现在，我们可以在需要清除标记的任何时候调用 clearMarkers() 函数。
示例代码
下面是完整的示例代码，包括创建地图、添加标记、过滤标记和清除标记等功能：
<!DOCTYPE html> <html> <head> <title>Google Maps V3: Only show markers in viewport - Clear markers issue</title> <script src="https://maps.googleapis.com/maps > 来源：[JavaScript中文网](https://www.javascriptcn.com/post/29701) ，转载请注明来源 [https://www.javascriptcn.com/post/29701](https://www.javascriptcn.com/post/29701)