Google 地图 V3 在隐藏 div 中偏离中心

发布于 2024-10-09 17:41:15 字数 698 浏览 0 评论 0原文

我在 div 中有一个谷歌地图，默认情况下我需要隐藏它

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

原文

I have a google map inside a div that I need to be hidden by default

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

When the map is unhidden a part of it isn't rendering. I'm guessing I have to reload the map onSubmit. Anybody know how to do this?

Thanks!

Here's my code:

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

This is the map oad function on the body tag:

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

Here is the div that is toggled, and the div that contains the map:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

鱼窥荷 2024-10-16 17:41:15

像这样的东西吗？ 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()"

Something like this? http://jsbin.com/imuri5
The idea is to initialize the map after displaying the DIV.

EDIT:
Ok based on your update replace:

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

with:

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

And then remove onload="load()" from the body tag

回复收藏 0 原文

长安忆 2024-10-16 17:41:15

我最近自己也遇到了同样的问题，并发现修复非常简单：

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

其中 map 是您的谷歌地图实例。

您可以在使 div 可见后调用此方法。

如果你使用 jQuery 来绘制地图，你可以使用

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

I recently had this same issue myself and discovered the fix to be quite simple:

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

Where map is your google map instance.

You can call this after you make your div visible.

If you use jQuery for the map, you can use

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

回复收藏 0 原文

情绪操控生活 2024-10-16 17:41:15

更好：

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

better:

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

and in show click event:

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

回复收藏 0 原文

~没有更多了~