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

Question

我正在使用 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 中找不到函数...

Answer 1

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

IE

html

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

css

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

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

Answer 2

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