无法使用 GMap API v3 成功重新初始化 Google 地图答案

【问题标题】：Google map cannot be re-initialized successfully with GMap API v3无法使用 GMap API v3 成功重新初始化 Google 地图
【发布时间】：2012-03-16 16:04:03
【问题描述】：

我正在通过 AJAX 动态加载我的页面。我在其中转储动态加载的 HTML 的某个元素，称为#container

<div id="container">
</div>

所以，我加载这样的页面：（顺便说一下，我使用的是 jQuery）

$.post( './', { 'page': 'home' }, function(e){
  $('#container').html( e );
},'html');

在我的一个页面中，我使用 GMap API v3 嵌入/加载了 Google 地图。基本上，我希望每次加载同一页面时都能正常显示此地图，因此我添加了一个重新初始化 GMap 的功能。但是，当我打开另一个页面，然后回到这个页面时，地图就乱了。我相信我必须在离开页面后首先销毁 GMap 的实例，这样当我回到那个页面时，它就会是新鲜的。

现在，我的问题是我找不到破坏地图的方法。实际上有没有办法，或者可能是不同的方法，或者可能是一种解决方法？

感谢您的帮助

编辑：

这是第一次加载 GMap 时的样子 http://imageshack.us/photo/my-images/707/firstoc.jpg/

这是访问不同页面（ajax 加载）并返回上一页面后的样子：http://imageshack.us/photo/my-images/864/secondy.jpg/

灰色区域是个问题。它只是出现在那里，你不能拖动它。我确实认为在重新加载页面之前需要销毁 GMap 对象，以免它搞砸，但我只是不知道如何。

【问题讨论】：

您的$.post(...) 中是否缺少撇号？你是什么意思“搞砸”？屏幕截图可能会有所帮助；一个链接会更好。
@AndrewLeach 抱歉，应该是 './'，我现在编辑并添加了屏幕截图

标签： javascript jquery ajax google-maps

【解决方案1】：

我遇到了类似的问题。您可能会发现我的解决方案很有帮助。

我使用的是“pageinit”：

$('.page-map').live('pageinit', function() {
...do stuff.
}

当我需要'pageshow'时：

$('.page-map').live('pageshow', function() {
...do stuff.
}

https://stackoverflow.com/questions/9713930/why-do-my-markers-end-up-at-the-top-left-corner-if-i-navigate-back-via-ajax

【讨论】：

没用，顺便说一句，它实际上不是移动解决方案，只是桌面解决方案
它们看起来像类似的问题。我建议这是由于 Ajax 导航。你能提供更多的代码吗？即使使用jsfiddle.net 也有助于您自己的故障排除。

【解决方案2】：

在此处查看此代码示例：jquery-ui-map-v_3

这不是唯一的解决方案，上一个链接中可能还有其他解决方案。

<script type="text/javascript">
        $('#page_id').live("pageshow", function() {
                $('#map_canvas').gmap({'center': '59.3426606750, 18.0736160278'});
        });
</script>

我正在 PhoneGap 框架和 jQuery Mobile 上进行开发，正如 gyaresu 所说，这挽救了我的生命。

祝你好运。

【讨论】：