部分回发后谷歌地图不显示

Posted

技术标签:

【中文标题】部分回发后谷歌地图不显示【英文标题】:Google map not showing after Partial postback 【发布时间】:2012-02-09 17:10:00 【问题描述】:

我在一个页面中有一个谷歌地图(使用 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】:

您需要像这样在更新面板的部分回发之后初始化地图。

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

【讨论】:

非常感谢现在显示的地图。但我创建的 javascript 函数不起作用。 javascript函数示例:$("#CheckBox1").change(function() if($(this).is(':checked')) showMarkers(); else hideMarkers(); ) ;您是否知道如何在回发后使所有功能正常工作?再次感谢 @Youssef 因为你说的这个javascript也需要再次初始化,所以你需要在EndRequest(或LoadMap())中添加它以重新初始化它。

以上是关于部分回发后谷歌地图不显示的主要内容,如果未能解决你的问题,请参考以下文章

将应用上传到 Playstore 后谷歌地图不显示

手动设置纬度和经度后谷歌地图不显示(缩放到)当前位置[重复]

JQuery面板推送后谷歌地图消失

为啥谷歌地图在几次回帖后冻结页面

如何设置 Android 谷歌地图一次显示整个(部分)世界地图?

仅在设备屏幕的特定部分显示谷歌地图折线