部分回发后Google地图未显示

时间:2012-01-13 13:48:44

标签: c# javascript asp.net google-maps updatepanel

我在页面中有一个谷歌地图(使用Javascript API v3)

地图加载如下:

在Default.aspx页面中:

(这是我将加载地图的div)                                                  

我正在使用的脚本:

<script src="http://maps.google.com/maps/api/js?sensor=false&" type="text/javascript </script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/MapScript.js"></script>

MapScript.j文件,其中包含用于加载地图的javascript代码以及我需要的所有其他内容(标记,动画,鼠标事件......)

MapScript.js 中,我使用此脚本加载地图

var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

“MapScript.js”包含我在地图中使用的许多功能。

直到现在一切正常,加载地图并且所有功能都能正常工作。

但我想做的是:

我将地图放在更新面板

背后的代码中

在页面加载时, MapPanel 不可见

protected void Page_Load(object sender, EventArgs e)
{
    MapPanel.Visible = false;
}

单击按钮我会在更新面板上进行部分回发,并将地图的可见性更改为true。

但问题是在部分回发后,地图停止显示。

我尝试使用RegisterStartupScript来注册我正在使用的所有3个javascript源。 (我把它放在PageLoad事件中)

string scr;
scr = "<script src='/Scripts/MapScript.js'></script>";
Page.ClientScript.RegisterStartupScript(Page.GetType(), "key", scr, false);

但它不起作用。

非常感谢任何帮助。希望我很清楚。

非常感谢

1 个答案:

答案 0 :(得分:4)

您需要在更新面板的部分回发后初始化地图,如下所示。

<script>
var prm = Sys.WebForms.PageRequestManager.getInstance();    
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);

function InitializeRequest(sender, args) {      
}

// fires after the partial update of UpdatePanel
function EndRequest(sender, args) {
    LoadMap();
}

var map = null;
function LoadMap()
{
    map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
}
</script>

你也可以动态加载javascript,如果你没有赢得加载,如果不是使用ajax显示的地图。这是一个例子,我只加载一个js。修改它以加载它们。

var map = null;
function LoadMap()
{
    LoadScript("http://maps.google.com/maps/api/js?sensor=false&", function() {
                        map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
                    }); 
}

function LoadScript(url, callback)
{
    jQuery.ajax({
            type: "GET",
            url: url,
            success: callback,
            dataType: "script",
            cache: true
    });
};