谷歌地图加载界面

Question

我注意到谷歌地图现在加载时间比平常要长，导致浏览器在加载前多次刷新。这让我想知道如何在地图完全加载之前创建一个加载屏幕。

有什么建议吗？

更新：（回应Gabi的代码）

google.maps.event.addListener(map, 'tilesloaded', function(){
    document.getElementById('loading').innerHTML = '';
})

在tilesloaded事件之前，是否可以有一个加载PNG遮罩覆盖整个地图并在它被删除？

- Nyxynyx

Answer 1

您可以监听 tilesloaded 事件：

google.maps.event.addListener(map, 'tilesloaded', function(){
    document.getElementById('loading').innerHTML = '';
})

这里有一个可用的jsfiddle代码示例：http://jsfiddle.net/96WgM/2/

- Gabi Purcaru

---

是否有可能在整个地图上覆盖一个加载PNG，并在“tilesloaded”事件之前将其删除？ - Nyxynyx

@Nyxynyx，你可以这样做，但是要在“tilesloaded”事件触发后再移除PNG，因为没有“beforetilesloaded”事件。 - Gabi Purcaru

Answer 2

或者，您可以将加载gif图像设置为地图div的背景：

http://jsfiddle.net/c962U/

- Mike