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