Google Maps Api V3：带有加载指示器的叠加 ImageMap

Question

我有一个如下所示的 ImageMap 叠加层：

var options = {
    getTileUrl: function(coord, zoom) {
        return myUrl+"?x=" + coord.x + "&y=" + coord.y + "&z=" + zoom;
    },
    tileSize: new google.maps.Size(256, 256),
    isPng: true
};

var overlay = new google.maps.ImageMapType(options);
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.overlayMapTypes.insertAt(0, overlay);

因为图像可能需要一段时间才能加载，所以我想显示地图的加载指示器（用于 AJAX 调用的常见动画 gif）。如果整个地图只有一个指示器，或者每个叠加图块只有一个指示器，我不确定可用性是否会更好。因此，欢迎为两者提供解决方案和想法。

Answer 1

使用 CSS 隐藏保存地图的 div。在你的地图上使用addEventListenerOnce() 来监听idle 事件或者bounds_changed 事件。 （您可能需要试验一下，看看哪个事件给您带来更好的结果。）当事件触发时，让保存您的地图的 div 可见。

在等待事件触发时，至少有两种合理的方式来显示进度指示器。您可以将它放在一个单独的 div 中（除了显示地图 div）您在事件触发时隐藏。或者您可以将地图 div 包装在另一个 div 中，并将该 div 的背景图像设置为您的动画进度指示器图像。

最后，你的代码可能类似于我不久前写的这个块：

document.getElementById("map_canvas").style.visibility = "hidden";
var mapType = new google.maps.ImageMapType({
                tileSize: new google.maps.Size(256,256),
                getTileUrl: function(coord,zoom) {
                    return 'img/tiles/'+zoom+'/'+coord.x+'/'+coord.y+'.png';
                }
            });
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.overlayMapTypes.insertAt(0, mapType);
google.maps.addListenerOnce(map, 'idle', function() { document.getElementById("map_canvas").style.visibility = "visible";});