Javascript 加载谷歌地图时显示加载图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5021224/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
show loading image while loading google map
提问by Alex Angelico
I'm using Google Maps Javascript API for showing a map in my site with aditional markers. This is the trigger
我正在使用 Google Maps Javascript API 在我的站点中显示带有附加标记的地图。这是触发器
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
This works fine, but the map takes a few seconds to show. I'm putting a loading image in the map div like this:
这工作正常，但地图需要几秒钟才能显示。我在地图 div 中放置一个加载图像，如下所示：
<div id="map_canvas" style="width:700px; height:500px"><img src="/image/ajax-loader.gif" /></div>
But the image never shows, just the blank page until the map shows.
但图像从不显示，只有空白页，直到地图显示。
The image is working, because if I disable the map loading function, the image is there. So I think the google map clears the div before the map is loaded.
图像正在工作，因为如果我禁用地图加载功能，图像就在那里。所以我认为谷歌地图在加载地图之前清除了div。
Any ideas how to show a loading feedback to the user while waiting? I could not find a function in the API...
任何想法如何在等待时向用户显示加载反馈？我在 API 中找不到函数...
回答by Andrew Killen
It's easier to add a GIF via CSS to the background of the Map DIV.
通过 CSS 将 GIF 添加到 Map DIV 的背景更容易。
i.e.
IE
html
html
<div id="map_canvas"></div>
css
css
#map_canvas {background: transparent url(images/ajax-loading.gif) no-repeat center center;}
the loading GIF will stay visible until the map is loaded. Very handy if your using the sensor to get the current location, as this takes a while. As soon as google maps is ready to populate #map with it's own images, you won't be able to see the loading GIF any more.
在加载地图之前，加载 GIF 将保持可见。如果您使用传感器获取当前位置非常方便，因为这需要一段时间。一旦谷歌地图准备好用它自己的图像填充#map，您将无法再看到正在加载的 GIF。
回答by Matt King
You might try to wrap the map div inside another div, and set the containing div's background to have some sort of animation graphic. Generally I've found that it's not a good idea to manipulate or place anything inside the element that Google Maps uses as the map.
您可能会尝试将地图 div 包裹在另一个 div 中，并将包含 div 的背景设置为具有某种动画图形。一般来说，我发现在 Google 地图用作地图的元素中操作或放置任何内容并不是一个好主意。
