Google Map V3在隐藏的div中偏离中心

Question

Google Map V3在隐藏的div中偏离中心

7

我有一个Google地图放置在一个

里面，我想默认情况下将其隐藏

<div id="newpost" style="display:none;">

当地图未显示时，其中的一部分没有渲染出来。我猜我必须在提交表单时重新加载地图。有人知道如何做吗？

谢谢！

以下是我的代码：

   <script type="text/javascript">
jQuery(document).ready(function(){
    jQuery('#newcatchhide').live('click', function(event) {        
         jQuery('#newpost').toggle('show');
    });
});

这是在body标签上的地图oad功能：

<body onload="load()" onunload="GUnload()">

这里是被切换的div和包含地图的div：

<div id="newpost" style="display:none;">
  <div id="map" style="width: 500px; height: 300px"></div>

- user547794

3个回答

13

最近我也遇到了同样的问题，发现解决方法非常简单：

google.maps.event.trigger(map, 'resize');

其中 map 是你的 Google 地图实例。

在你让 div 可见后，可以调用此函数。

如果你使用 jQuery 来操作地图，可以使用以下代码：

map = $('#map_canvas').gmap().map;

- Jani Hartikainen

你好Jani，我应该在切换按钮提交时调用这个吗？谢谢！ - user547794

在地图可见后，您将调用此函数。 - Jani Hartikainen

这是正确的做法。不过之后你可能需要将地图居中。 - riot_starter

0

更好：

gmap.redraw = function() {
    gmOnLoad = true;
    if(gmOnLoad) {
        google.maps.event.trigger(gmap, "resize");
        gmap.setCenter(gmlatlng);
        gmOnLoad = false;
    }
}

在展示点击事件中：

$("#goo").click(function() {
  if ($("#map_canvas").css("display") == "none") {
    $("#YMapsID").toggle();
    $("#map_canvas").toggle();
    if (gmap != undefined) {
        gmap.redraw();
    }
  }
});

- Крайст

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ifaour · Accepted Answer

这样可以吗？http://jsbin.com/imuri5
思路是在显示DIV之后初始化地图。注意。

编辑：
根据你的更新，替换为：

jQuery('#newcatchhide').live('click', function(event) {        
         jQuery('#newpost').toggle('show');
    });

使用：

var onLoad = true;
jQuery('#newcatchhide').live('click', function(event) {        
    jQuery('#newpost').toggle(function() {
        if(onLoad) {
            load();
            onLoad = false;
        }
    });
});

然后从 body 标签中删除 onload="load()"