Question

我在Google地图中有很多标记（大约3000个），并且弹出窗口中有图标和高级细节。这就是为什么地图打开很晚，所有标记加载都很晚。因为我从数据库加载所有标记列表并一次用foreach循环显示它们。

现在我想在导航（滑动）地图时逐个部分加载标记。

例如，如果我在 Region1 中，当我将地图导航（滑动）到 Region2 Region1 中看到标记>，仅加载 Region2

中的标记

请，任何想法，样本或链接。 Google Maps API是否有导航事件？

Answer 1

您可以为中心和缩放级别更改注册地图事件，然后加载标记（如果它们位于当前视口中）：

function loadMarker() {
    // Get the center lat/lng of the map
    var center = map.getCenter();

    // Get the size of the map viewport
    var bounds = map.getBounds(), 
    var cor1 = bounds.getNorthEast(), 
    var cor2 = bounds.getSouthWest(), 
    var cor3 = new google.maps.LatLng(cor2.lat(), cor1.lng()), 
    var cor4 = new google.maps.LatLng(cor1.lat(), cor2.lng()), 
    var width = spherical.computeDistanceBetween(cor1,cor3), 
    var height = spherical.computeDistanceBetween( cor1, cor4);

    // Loop through your markers
    for(var i=0; i < <size of your marker array>; i++) {
        // Get the distance between the center of the map and your markers
        var distanceFromMarker = google.maps.geometry.spherical.computeDistanceBetween(center, <marker lat/lng>);

        if(distanceFromMarker <= width || distanceFromMarker <= height) {
            <load marker>
        }
    }
}

// Register center and zoom level change events
google.maps.event.addListener(map, 'center_changed', loadMarker);
google.maps.event.addListener(map, 'zoom_changed', loadMarker);

Answer 2

您可以根据DB的要求（例如，在bounds_changed上）根据地图的边界请求标记详细信息。

最佳数据库应该支持spatial queries（但不是必需的）

Answer 3

谷歌网站有一个专门针对此问题的页面，提供了不同的方法来提高性能： https://developers.google.com/maps/articles/toomanymarkers

“视口标记管理”一章尤其应该包含一些有关如何实现所描述内容的有用信息。

导航地图时，将标记添加到Google Map

3 个答案: