加载谷歌地图时显示加载图像答案

【问题标题】：show loading image while loading google map加载谷歌地图时显示加载图像
【发布时间】：2011-02-16 19:34:43
【问题描述】：

我正在使用 Google Maps Javascript API 在我的网站中显示带有附加标记的地图。这是触发器

var map = new google.maps.Map(document.getElementById("map_canvas"), settings);

这工作正常，但地图需要几秒钟才能显示。我将加载图像放在地图 div 中，如下所示：

<div id="map_canvas" style="width:700px; height:500px"><img src="/image/ajax-loader.gif" /></div>

但图像永远不会显示，只是地图显示之前的空白页。

图像正常工作，因为如果我禁用地图加载功能，图像就在那里。所以我认为谷歌地图在加载地图之前会清除 div。

任何想法如何在等待时向用户显示加载反馈？我在 API 中找不到函数...

【问题讨论】：

【解决方案1】：

通过 CSS 将 GIF 添加到 Map DIV 的背景更容易。

即

html

<div id="map_canvas"></div>

css

#map_canvas {background: transparent url(images/ajax-loading.gif) no-repeat center center;}

加载 GIF 将保持可见，直到加载地图。如果您使用传感器获取当前位置非常方便，因为这需要一段时间。一旦谷歌地图准备好用它自己的图像填充#map_canvas，您将无法再看到正在加载的 GIF。

【讨论】：

【解决方案2】：

您可能会尝试将地图 div 包装在另一个 div 中，并将包含 div 的背景设置为具有某种动画图形。一般来说，我发现在 Google 地图用作地图的元素中操作或放置任何东西都不是一个好主意。

【讨论】：