在Google地图infowindow中加载动画

时间:2013-12-17 20:10:34

标签: javascript google-maps google-maps-api-3

我已经开发了这个http://weathermap.cloudcontrolled.com/,您可以点击该地点并获取其中的当前天气详情。一切正常,但点击一个显示天气的地方后会有小的延迟。为此,我想在infowindow 中显示一个小的加载动画,在天气数据可用之后,它将在同一个信息窗口显示天气。这该怎么做。 (这是纯html / js网站,你可以按 ctrl + u 查看源代码)

2 个答案:

答案 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>");
    });
});
  1. 创建标记,通过createMarker函数
  2. 将动画ajax图标放在infoWindow中
  3. 成功/回调,用实际天气内容替换infowindow内容

答案 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);
};