如何检测 GroundOverlay 的加载进度

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

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

1. 通过javascript创建img标签
2. 将其src设置为overlays/layer1.png
3. 显示等待箱
4. 添加一个 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 类中，以便用户对加载的图像有更多的访问和控制。我也希望我的项目具有此类功能。