javascript - 导航 map 时向 Google map 添加标记

Question

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

现在我想在导航(滑动) map 时逐个加载标记。

例如，如果我在 Region1，当我将 map 导航(滑动)到 Region2 时，我只能在 Region1 中看到标记>，只加载 Region2

中的标记

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

Answer 1

您可以为中心和缩放级别更改注册 map 事件，然后加载标记(如果它们在当前视口(viewport)中):

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);