javascript - 谷歌地图 API V3 : Overlay ImageMap with loading indicators

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);

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

Answer 1

使用 CSS 隐藏包含 map 的 div。在 map 上使用 addEventListenerOnce() 来监听 idle 事件或 bounds_changed 事件。 (您可能需要进行试验，看看哪个事件会给您带来更好的结果。)当事件触发时，使保存 map 的 div 可见。

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

最后，您的代码可能类似于我不久前不得不写的这个 block :

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";});