Javascript 如何检测GroundOverlay加载的进度

我正在谷歌地图上加载10个地面覆盖图，并希望显示与加载图像相关的进度

var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(42.80059,-115.253806),
new google.maps.LatLng(47.481725,-110.227471));

var layer1 = new google.maps.GroundOverlay("overlays/layer1.png",imageBounds);
layer1.setOpacity(.5);
layer1.setMap(map);

---

如何检测每个覆盖的实际图像何时加载或加载的百分比？我想添加一个进度条或其他东西，向用户显示覆盖正在加载，因为它可能需要5秒左右的时间

我怀疑你能做到。您可以请求添加到GroundOverlay类的新函数，以便用户对加载的图像有更多的访问和控制。我也希望在我的项目中有这样的功能。

如果您有一个单独的图像作为地面覆盖，我将执行以下操作：

通过javascript创建img标记

将其src设置为overlays/layer1.png

显示等待框

向其添加一个onload事件，将其加载为gmaps覆盖并关闭等待框

进展。。。这是一个更具体的浏览器。但装载很容易，因此：

function loadOverlay(){
    var img = new Image();
    var img_url = "overlays/layer1.png"
    img.src= img_url;
    $('#wait_for_overlay').show();
    img.onLoad = function(){
        $('#wait_for_overlay').hide();
        var layer1 = new google.maps.GroundOverlay(img_url,imageBounds);
        layer1.setOpacity(.5);
        layer1.setMap(map);
    }
};

这将起作用的原因：

创建img对象并设置其“src”属性将使浏览器在javascript函数完成此操作后立即开始下载请求的文件

浏览器会将此图像放入其本地缓存中，然后调用onLoad函数来查看应该如何处理它

回调实际上对img变量不做任何处理（也许它应该，确保它不会按照闭包规则被删除，如果这是错误的话，对它执行NOP），而是调用GoogleMaps函数

谷歌地图功能将在完全相同的url上请求图像，浏览器将在该url上查找其缓存表，并立即从缓存中返回图像

这是一个令人讨厌的把戏，但事实上，谷歌地图引擎将在后台执行完全相同的加载操作（因为这就是地图引擎的工作方式）

---

我希望这能满足你的问题。。。没有进度条，只是一个加载指示器。。。也许你可以通过使用XHR请求并检查进度来执行进度条，我不确定，但诀窍是一样的：执行一个假请求，以使其到达缓存。

Aadaam的诀窍非常出色。我之前已经考虑过了，但没有进一步讨论，因为我有一个问题，在我的例子中，我希望保持层的顺序（可能超过10层）。通过按照Aadaam的建议预加载图像，将“随机”创建图层。在开始创建覆盖图之前，可以预加载所有图像，但这可能会更加糟糕以避免破坏附加到映像的其他处理程序。