Question

我正在将10个GroundOverlays加载到GoogleMap上，并希望显示与加载图片相关的进度。

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秒钟左右。

Answer 1

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

通过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），而是调用google-maps函数

google-maps函数将在完全相同的URL处请求图像，浏览器将在该URL上查找其缓存表，并立即从缓存中恢复图像。

这个技巧很讨厌，但事实上，谷歌地图引擎会在后台完成相同的onLoad事情（因为这就是地图引擎的工作方式）。

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

Answer 2

我怀疑你能做到。您可以请求添加到GroundOverlay类的新功能，以便用户可以更多地访问和控制加载的图像。我也想为我的项目提供这些功能。

如何检测GroundOverlay加载的进度

2 个答案: