我正在将 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 秒左右。
如果你有一个单一的图像作为groundoverlay，我会做以下事情：
进展......这是一个更具体的浏览器。但是加载很容易，所以：
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 请求它并检查进度来制作进度条，我不确定，但诀窍是一样的：做一个虚假的请求，以使其到达缓存。
我怀疑你能做到。您可以请求将新功能添加到 GroundOverlay 类中，以便用户对加载的图像有更多的访问和控制权。我也想为我的项目提供这些功能。
截至 10 年后，即 2021 年 12 月。我可以确认 @Aadaam 的想法很有效！
试试我的例子：
单击示例链接，尝试缩放地图或平移，它将图像加载为groundOverlay，进度条显示在左侧面板底部。
new Image()
是 HTML img 对象，文档在这里
img_object.onload
都是小写，如果你写
.onLoad
会给你错误。
