我已经开发了这个http://weathermap.cloudcontrolled.com/,您可以点击该地点并获取其中的当前天气详情。一切正常,但点击一个显示天气的地方后会有小的延迟。为此,我想在infowindow 中显示一个小的加载动画,在天气数据可用之后,它将在同一个信息窗口显示天气。这该怎么做。 (这是纯html / js网站,你可以按 ctrl + u 查看源代码)
答案 0 :(得分: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>");
});
});
createMarker
函数答案 1 :(得分:0)
您还可以尝试以下
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);
};