在Google地圖中加載動畫infowindow

Question

我開發了這個http://weathermap.cloudcontrolled.com/，您可以點擊某個地方並獲取當前天氣詳情。一切正常，但它的得到小的延遲後，點擊一個地方顯示天氣。爲此，我想在infowindow中顯示一個小的加載動畫，在獲得天氣數據後，它會在同一個infowindow中顯示天氣。這個怎麼做。 （這是純HTML/JS的網站，你可以通過按CTRL 查看源代碼 + ü）

Answer 1

是。從http://www.ajaxload.info/獲取的動畫圖標，把它ajaxicon.gif

您map單擊事件更改爲：

google.maps.event.addListener(map, 'click', function(event) { 
    //call function to create marker 
     if (marker) { 
      marker.setMap(null); 
      marker = null; 
     } 
    // why do you recreate the marker over and over ?? 
    marker = createMarker(event.latLng, 'name', '<img src="ajaxicon.gif">'); 

    getWeather(event.latLng.lat(),event.latLng.lng(),function (data) { 
     infowindow.setContent("<b>"+data.list[0].name+"</b><br>"+data.list[0].weather[0].description+"<br><center><img src=http://www.openweathermap.com/img/w/"+data.list[0].weather[0].icon+".png></center>"); 
    }); 
}); 

1. 建立標記，將在信息窗口動畫Ajax的圖標，通過您的createMarker功能
2. 上成功/回撥，用實際天氣內容替換infowindow內容

Answer 2

您也可以試試以下內容

google.maps.event.addListener('click', showLoading); 

function showLoading(event) { 
    var contentString = '<img src="images/loading.gif">'; 

    infoWindow.setContent(contentString); 
    infoWindow.setPosition(event.latLng); 

    getWeather(event.latLng.lat(),event.latLng.lng(),function (data) { 
    contentString = "<b>"+data.list[0].name+"</b><br>"+data.list[0].weather[0].description+"<br><center><img src=http://www.openweathermap.com/img/w/"+data.list[0].weather[0].icon+".png></center>" 
    infowindow.setContent(contentString); 
    }); 

    infoWindow.open(map); 
};