1

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

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

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

请为此提供任何想法、示例或链接。Google Maps API 有导航事件吗？

4

3 回答 3

5

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

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);
于 2013-08-23T12:17:40.013 回答
2

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

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

于 2013-08-23T14:17:26.057 回答
2

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

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

于 2013-08-23T13:25:02.463 回答