Question

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

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>");
    });
});

创建标记，通过createMarker函数
成功/回调，用实际天气内容替换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);
};

在Google地图infowindow中加载动画

2 个答案: