Javascript Google Maps Api V3：使用加载指示器覆盖ImageMap

我有一个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）。我不确定如果整个地图只有一个指标，或者每个叠加图块只有一个指标，可用性是否会更好。因此，这两种方法的解决方案和想法都是受欢迎的。

使用CSS隐藏保存地图的div。在地图上使用

addEventListenerOnce（）

来侦听

idle

事件，或者可能是

bounds\u changed

事件。（您可能需要进行实验，看看哪个事件会给您带来更好的结果。）当事件触发时，使保存地图的div可见

在等待事件触发时，至少有两种合理的方式显示进度指示器。可以将其放在单独的div中（除了显示map div之外），在事件触发时隐藏该div。或者，您可以将map 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";});

---

谢谢，空闲的听众似乎是一个很好的可能性。但我不想隐藏地图，因为每次我移动地图时，它都应该保持可见，并且只应添加一个加载指示器，可能会在地图画布上添加另一个覆盖div。您可以选择仅在初始加载时隐藏地图。当然，当用户平移或缩放时，您不会得到进度指示器。尽管我越想这个问题，我就越想知道解决方案是否不仅仅是找到一种减少瓷砖加载时间的方法。如果您没有使用MapTiler或gdal2tiles.py创建平铺，您可能需要对此进行研究。通过pngcrush和pngnq运行您的tiles可能是值得的。我想你不是在动态生成瓷砖。如果是这样，那么这可能是真正的问题，除非你有巨大的计算能力。