javascript - 谷歌地图 V3 : Only show markers in viewport - Clear markers issue

Question

我喜欢使用 Google map 创建可以处理大量标记(超过 10,000 个)的 map 。为了不减慢 map 速度，我创建了一个 XML 文件，它只输出当前视口(viewport)内的标记。

首先，我使用 initialize() 来设置 map 选项:

function initialize() {
    var myLatlng = new google.maps.LatLng(51.25503952021694,3.27392578125);
    var myOptions = {
        zoom: 8,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    google.maps.event.addListener(map, 'tilesloaded', function () {
    loadMapFromCurrentBounds(map);
    }); 
}

当“tilesloaded”事件完成时，我使用 loadMapFromCurrentBounds()，此函数将获取当前边界并向 XML 文件发送请求以显示当前视口(viewport)内的标记:

function loadMapFromCurrentBounds(map) {

    // First, determine the map bounds
    var bounds = map.getBounds();

    // Then the points
    var swPoint = bounds.getSouthWest();
    var nePoint = bounds.getNorthEast();

    // Now, each individual coordinate
    var swLat = swPoint.lat();
    var swLng = swPoint.lng();
    var neLat = nePoint.lat();
    var neLng = nePoint.lng();

    downloadUrl("mapsxml.php?swLat="+swLat+"&swLng="+swLng+"&neLat="+neLat+"&neLng="+neLng+"", function(data) {
        var xml = parseXml(data);
        var markers = xml.documentElement.getElementsByTagName("marker");
        var infoWindow = new google.maps.InfoWindow; 

        for (var i = 0; i < markers.length; i++) {
            var address = markers[i].getAttribute("address");
            var type = markers[i].getAttribute("type");
            var name = markers[i].getAttribute("name");

            var point = new google.maps.LatLng( 
            parseFloat(markers[i].getAttribute("lat")),
            parseFloat(markers[i].getAttribute("lng"))
            );

            var html = "<b>" + name + "</b> <br/>" + address;
            var icon = customIcons[type] || {};

            var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow});

            bindInfoWindow(marker, map, infoWindow, html);
        }
    })
}

这很好用，但是，当前代码不会卸载不在视口(viewport)中的标记。除此之外，它会再次加载已经加载的标记，当在同一区域移动 map 一次 View 时，这会非常快地减慢 map 速度。

所以当视口(viewport)改变时，我喜欢在加载新标记之前先清除整个 map 。执行此操作的最佳方法是什么？

Answer 1

您需要向 map 添加另一个事件监听器:

google.maps.event.addListener(map,'bounds_changed', removeMarkers);

参见 here有关从谷歌地图中删除所有标记的更多信息 - 不幸的是，我不认为它可以通过一个电话完成。所以你必须编写 removeMarkers 或类似的东西，它必须遍历 map 上的所有标记，像这样单独删除它们:

 markersArray[i].setMap(null);

我不知道在删除之前检查标记是否在视口(viewport)中是否更快:

 map.getBounds();

Read more about Google Map API v3 events