javascript - 如何检测为 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 叠加层加载并关闭等待框。

Progress...这更特定于浏览器。但是加载很容易，所以:

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 操作(因为这就是 map 引擎的工作方式)。

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