2

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

4

1 回答 1

5

使用 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";});
于 2011-05-22T15:55:17.083 回答