Google Maps V3 API中KmlLayer加载不全问题求助

1. 给图层加失败重试机制 #

Google Maps的KmlLayer自带状态监听事件，我们可以给每个图层绑定status_changed事件，一旦检测到加载失败，就重新加载该图层，能有效解决网络波动或超时导致的加载失败问题。

修改后的代码示例：

function initializeGoogleMap() {
    var mapOptions = {
        center: { lat: 45.325, lng: 14.254},
        zoom: 12,
        panControl: false,
        zoomControl: false,
        mapTypeControl: true,
        scaleControl: false,
        streetViewControl: false,
        overviewMapControl: false,
        mapTypeId: google.maps.MapTypeId.HYBRID
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    // 封装带重试逻辑的KML加载函数
    function loadKmlLayer(url) {
        var layer = new google.maps.KmlLayer({
            url: url,
            map: map,
            preserveViewport: true
        });

        google.maps.event.addListener(layer, 'status_changed', function() {
            var status = layer.getStatus();
            // 检测到无效请求或超时，延迟1秒重试
            if (status === google.maps.KmlLayerStatus.INVALID_REQUEST || status === google.maps.KmlLayerStatus.TIMEOUT) {
                setTimeout(function() {
                    loadKmlLayer(url);
                }, 1000);
            }
        });
    }

    // 加载四个图层
    loadKmlLayer("https://www.virtualmountains.co.uk/Istria/PlacesOPOV1c.kml");
    loadKmlLayer("https://www.virtualmountains.co.uk/Istria/RoutesEdgeV1k.kml");
    loadKmlLayer("https://www.virtualmountains.co.uk/Istria/RoutesFillV1k.kml");
    loadKmlLayer("https://www.virtualmountains.co.uk/Istria/RoutesOPOV1n.kml");
}

2. 改成串行加载，避免并发请求过载 #

同时发起4个KML请求可能触发Google Maps API的并发限制，或是服务器带宽瓶颈，导致后面的请求超时。改成等前一个图层加载成功后再加载下一个，能降低并发压力。

代码示例（用Promise实现串行加载）：

function initializeGoogleMap() {
    var mapOptions = {
        center: { lat: 45.325, lng: 14.254},
        zoom: 12,
        panControl: false,
        zoomControl: false,
        mapTypeControl: true,
        scaleControl: false,
        streetViewControl: false,
        overviewMapControl: false,
        mapTypeId: google.maps.MapTypeId.HYBRID
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    // 封装返回Promise的KML加载函数
    function loadKmlLayerAsync(url) {
        return new Promise(function(resolve, reject) {
            var layer = new google.maps.KmlLayer({
                url: url,
                map: map,
                preserveViewport: true
            });

            google.maps.event.addListener(layer, 'status_changed', function() {
                var status = layer.getStatus();
                if (status === google.maps.KmlLayerStatus.OK) {
                    resolve(layer);
                } else {
                    reject(status);
                }
            });
        });
    }

    // 按顺序串行加载四个图层
    loadKmlLayerAsync("https://www.virtualmountains.co.uk/Istria/PlacesOPOV1c.kml")
        .then(function() {
            return loadKmlLayerAsync("https://www.virtualmountains.co.uk/Istria/RoutesEdgeV1k.kml");
        })
        .then(function() {
            return loadKmlLayerAsync("https://www.virtualmountains.co.uk/Istria/RoutesFillV1k.kml");
        })
        .then(function() {
            return loadKmlLayerAsync("https://www.virtualmountains.co.uk/Istria/RoutesOPOV1n.kml");
        })
        .catch(function(err) {
            console.log('某个图层加载失败:', err);
        });
}

3. 优化KML文件本身 #

如果KML文件体积过大或存在语法问题，也会导致加载超时：

• 压缩KML内容，删除多余注释、重复样式定义，合并相同样式
• 用Google官方的KML校验工具检查文件是否符合标准，修复语法错误
• 若单个KML内容仍过多，可进一步拆分为更小的文件

内容的提问来源于stack exchange，提问作者Derek