導航地圖時將標記添加到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

特別是“視口標記管理”一章應包含一些有關如何實現所描述內容的有用信息。