目前,当用户点击我们地图屏幕上的位置标记时,会调用一个页面方法来从服务器检索附加信息。当 page 方法成功时,结果用于定义显示在地图上的 infoWindow 的内容。在页面方法很慢的情况下,我们希望 infoWindow 立即显示,但带有加载指示器。page 方法成功后,infowWindow 的内容将被更新。
到目前为止,我的天真的方法是最初创建带有加载指示器的 infoWindow,并通过调用 open(map) 显示此初始 infoWindow,然后在 page 方法成功后更新该 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;
}