加載谷歌地圖時顯示加載圖像

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 地圖用作地圖的元素中操作或放置任何內容並不是一個好主意。