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

Question

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

现在，我认为在导航（滑动）地图时要部分加载标记 。

例如，如果我在区域1，我只能在区域1看到的标记，当我导航（滑动）地图到区域2，以加载在区域2只标记

请提供任何想法，示例或链接。 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

您可以根据要求从数据库（例如，在bounds_changed上）基于​​地图的边界请求标记细节。

最佳情况下，您的数据库应支持空间查询 （但不是必需的）

Answer 3

谷歌网站上有专门针对此问题的页面，其中提供了多种提高性能的方法： https : //developers.google.com/maps/articles/toomanymarkers

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