添加加载指标到谷歌地图infoWindow

时间:2012-06-11 20:12:40

标签: c# javascript asp.net google-maps-api-3 scriptmanager

目前,当用户点击地图屏幕上的位置标记时,会调用页面方法以从服务器检索其他信息。页面方法成功后,结果将用于定义显示在地图上的infoWindow的内容。在页面方法很慢的情况下,我们希望infoWindow立即显示,但带有加载指示符。页面方法成功后,将更新infowWindow的内容。

到目前为止,我的天真方法是最初使用加载指示器创建infoWindow并显示此初始infoWindow并调用open(map),然后在页面方法成功后更新该infoWindow的内容。但是,这种方法不起作用,因为在页面方法完成之后才会更新地图画布(因此从不显示infoWindow的初始版本)。

-----页码-----

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.8&client=MY_CLIENT&sensor=false"></script>

<script type="text/javascript">

   function initialize_map() {
      map = new google.maps.Map(...);
      // set remaining map properties...
   }

   window.onload = function () {
      initialize_map();
   }

   function DrawPoint(loc) {
      var marker = GetPointMarker(loc);
      // set remaining point marker properties...
      marker.setMap(map);

      var showPointInfo = function (evt) {
         var infoWindow = infowindowList[loc];
         if (infoWindow == undefined)
         {
            GetPointInfoStart(loc);
            GetPointInfo(loc);
         }
      };

      google.maps.event.addListener(marker, 'click', showPointInfo);   
   }

   function GetPointInfoStart(loc)
   {
      var infoWindow = new google.maps.InfoWindow();
      var content = // initial content with loading indicator
      infoWindow.setContent(content);
      // set remaining infoWindow properties...
      infoWindow.open(map);
   }

   function GetPointInfo(loc)
   {
      // call page method to retrieve data for infoWindow
      PageMethods.GetMapPointInfo(..., OnGetPointInfoSuccess, OnFailure);
   }

   function OnGetPointInfoSuccess(result) {
      eval(result);
      var infoWindow = infowindowList[loc];
      var content = // final content with retrieved data
      infoWindow.setContent(content);
   }

</script>

-----代码背后-----

protected override void OnInit(EventArgs e)
{
   ScriptManager.GetCurrent(this).EnablePageMethods = true;
   ...
   base.OnInit(e);
}

[WebMethod]
public static string GetMapPointInfo(...)
{
   // retrieve point information from server...
   return jsonString;
}

1 个答案:

答案 0 :(得分:0)

我发现了如何定义初始内容的错误。现在正在正确定义内容,方法(如上所述)现在正在运行。