将加载指示器添加到谷歌地图信息窗口
Add loading indicator to google maps infoWindow
目前,当用户单击地图屏幕上的位置标记时,将调用页面方法来从服务器检索其他信息。 当页面方法成功时,结果将用于定义地图上显示的信息窗口的内容。 在页面方法较慢的情况下,我们希望立即显示 infoWindow,但带有加载指示器。 页面方法成功后,infowWindow 的内容将被更新。
到目前为止,我的天真方法是最初创建带有加载指示器的 infoWindow,并通过调用 open(map) 显示此初始 infoWindow,然后在页面方法成功后更新该 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;
}
我在如何定义初始内容时发现了一个错误。 现在正确定义内容后,该方法(如上所述)现在正在起作用。
相关文章:
- 访问布局信息是否也会导致浏览器重排
- 定义完全独立的样式信息
- 使用html2canvas获取基本信息
- JS表单提交"无法使用Chrome数据保护程序加载此页面.尝试重新加载页面.调试信息:POST CISmtuK
- 从信息框调用弹出图像库
- 如何在不传递此信息的情况下查找被调用的元素
- 将谷歌自动完成地址信息放在页面上,而不是表格中
- 如何通过解析类信息来使用jQuery创建类
- 包含数据库中相关信息的开放模态
- 单击按钮即可在浏览器的新选项卡中打开 Sapui5 详细信息页面
- 如何调整信息窗口的大小并点击按钮?+更改信息窗口的内容
- ng在更新$scope后重复不更新信息
- 谷歌地图点击潜水触发信息窗口
- 根据CHECKBOX输入值动态更新DIV信息
- 如何使用ember.js在操作中传递当前上下文中目标旁边的信息
- Jquery on单击“显示信息”
- 将FlowPlayer嵌入谷歌地图信息窗口
- AEM(cq5)使用组件内的信息
- 如何在完整日历中的当天点击时显示活动详细信息
- 使用javascript后台脚本获取Yotutube频道信息