如何在JavaScript中检测Google Maps getTileUrl请求的成功与失败？

需求说明 #

现有Google Map叠加层从外部服务获取PNG瓦片，需要统计getTileUrl向目标服务发起的成功请求数量。尝试过tilesloaded监听器，但该事件仅能判断整体瓦片加载完成，无法追踪单个瓦片的请求状态。

实现方案 #

核心思路是通过预加载瓦片并监听其加载状态，替代直接返回URL的逻辑，以此统计成功请求数：

• 初始化计数器记录成功请求数量
• 使用Image对象预加载瓦片，监听load事件标记请求成功，error事件标记失败
• 修改getTileUrl逻辑，先验证瓦片可加载性，成功则计数递增并返回URL

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Map</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <style> 
    #map { 
        width: 600px; 
        height: 500px; 
    }
    .success-count {
        position: absolute;
        top: 10px;
        left: 10px;
        background: white;
        padding: 8px;
        border-radius: 4px;
        font-size: 14px;
        z-index: 1000;
    }
    </style>
</head>
<body>
    <div class="success-count">成功加载瓦片数: <span id="count">0</span></div>
    <div id="map"></div>
    <script>
        let gmap;
        let successCount = 0;
        const countElement = document.getElementById('count');

        // 验证瓦片是否可成功加载
        function checkTileLoad(url) {
            return new Promise((resolve) => {
                const img = new Image();
                img.onload = () => {
                    successCount++;
                    countElement.textContent = successCount;
                    resolve(url);
                };
                img.onerror = () => {
                    // 失败时可返回占位图URL，此处示例返回空
                    resolve(null);
                };
                img.src = url;
            });
        }

        function initMap() {
            gmap = new google.maps.Map(document.getElementById('map'), {
                center: {lat: 44.9648, lng: -93.252},
                zoom: 5
            });

            const layers = new google.maps.ImageMapType({
                getTileUrl: async function(coord, zoom) {
                    const tileUrl = ['https://example.tiles.com/', zoom, '/', coord.x, '/', coord.y, '/current.png'].join('');
                    // 等待瓦片加载验证
                    const validUrl = await checkTileLoad(tileUrl);
                    return validUrl;
                },
                tileSize: new google.maps.Size(256, 256)
            });
            gmap.overlayMapTypes.push(layers);
        };
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_API_KEY&callback=initMap" async defer></script>
</body>
</html>

注意事项 #

• 由于getTileUrl使用了async/await，需确保运行环境支持ES6+语法
• 若瓦片服务存在跨域限制，需确保服务配置了CORS允许当前域名访问
• 失败请求可根据需求处理，比如返回默认占位瓦片URL，避免地图出现空白块

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