Question

我通过AJAX动态加载我的页面。有一个元素，我转储动态加载的HTML，它被称为#container

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

所以，我加载这样的页面:(我顺便使用jQuery）

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

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

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

感谢您的帮助

编辑：

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

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

灰色区域是个问题。它只是出现在那里你无法拖动它。我认为在重新加载页面之前需要销毁GMap对象，这样它就不会搞砸了，但我只是不知道如何。

Answer 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

Answer 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 Framework和jQuery Mobile，正如gyaresu所说，这挽救了我的生命。

祝你好运。

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

2 个答案: