javascript 隐藏div中的谷歌地图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7084363/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google maps in hidden div
提问by Rob
I have a page with two tabs. The first tab has photos and the second a google map. The problem is that the google map is not completely drawing because it is in a hidden div. So I moved the initialize() function to the href of the map tab using onclick(). This works the first time you click on it but when you return to the photos tab and then go back to the map tab the map only partially draws. If you click the map tab a second time it works perfectly. Any ideas?
我有一个带有两个选项卡的页面。第一个标签有照片，第二个是谷歌地图。问题是谷歌地图没有完全绘制，因为它在一个隐藏的div中。因此，我使用 onclick() 将 initialize() 函数移至地图选项卡的 href。这在您第一次单击它时有效，但是当您返回照片选项卡然后返回地图选项卡时，地图仅部分绘制。如果您再次单击地图选项卡，它将完美运行。有任何想法吗？
tabs javascript:
标签javascript：
<script type="text/javascript">
$(function () {
var tabContainers = $('div.tabs > div');
$('div.tabs ul.tabNavigation a').click(function () {
tabContainers.hide().filter(this.hash).show();
$('div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
</script>
google maps javascript:
谷歌地图javascript：
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(<?=$lat ?>, <?=$lng ?>);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"<?=$fulladdress ?>"
});
}
</script>
html:
html：
<div class="tabs">
<ul class="tabNavigation">
<li><a href="#first">Photos</a></li>
<li><a href="#map_canvas" onclick="initialize(); return false;">Map</a></li>
</ul>
<div id="first"> </div>
<div id="map_canvas" ></div>
回答by Doug Molineux
I've seen this before you need to resize the map:
在您需要调整地图大小之前，我已经看到了这一点：
google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
This is for V3:
这是针对 V3 的：
http://code.google.com/p/gmaps-api-issues/issues/detail?id=1448
http://code.google.com/p/gmaps-api-issues/issues/detail?id=1448
A little more info:
多一点信息：
回答by user2060451
After a day struggling with this, I followed the asker's link to his problem.
在为此苦苦挣扎了一天之后，我按照提问者的链接找到了他的问题。
I saw this snippet some many times
我多次看到这个片段
google.maps.event.trigger(map, 'resize');
and I just couldn't find the right place to insert this piece of code. As a newbie in programming, I tried all places, which includes after the init, after calling the map, everywhere. Nothing worked.
我只是找不到插入这段代码的正确位置。作为编程的新手，我尝试了所有地方，包括init之后，调用map之后，到处都是。没有任何效果。
Then I decided to follow a real situation, the person who actually asked this question. This is what he did, worked for him or her and it also worked for me. I did a minor change because it's always like that. His/her link is one of the comments.
然后我决定跟随一个真实的情况，那个真正问这个问题的人。这就是他所做的，为他或她工作，也对我来说有效。我做了一个小改动，因为它总是这样。他/她的链接是评论之一。
My adobe DW doesn't give this option onclick, but... it works. You should try directly on the tag anchor where the div is hidden. It may be the proper place. Call the init and recenter at the body tag (or anchor tag). Once you click on the map, it will recenter the map.
我的 adobe DW 没有在 onclick 上提供这个选项，但是......它有效。您应该直接尝试隐藏 div 的标签锚点。这可能是合适的地方。在 body 标签（或锚标签）处调用 init 和recenter。单击地图后，它会将地图重新居中。
<body onclick="initialize(); center_map();">
After the
之后
function initialize {
....
}
Have this one
有这个
<script type="text/javascript">
function center_map() {
var center = map.getCenter();
document.getElementById("your_div_name").style.width = 'auto';
document.getElementById("your_div_name").style.height = '250px';
google.maps.event.trigger(map, 'resize');
map.setCenter(center);
}
</script>
Attention newbies from all over the world: change the name of div above. Put your real sizes. Some people say you need real numbers in the size. But any time you click any part of body, it runs the function. Try to be more specific on you onclick function. Hope this helps someones.
全世界菜鸟注意：改上面的div名称。放上你的真实尺寸。有人说你需要大小的实数。但是任何时候你点击身体的任何部分，它都会运行这个功能。尝试更具体地介绍您的 onclick 功能。希望这对某人有所帮助。
回答by Ricardo
This works for me:
这对我有用：
google.maps.event.trigger(map, 'resize');
but, after the tab is shown...
但是，在显示选项卡后...
$('a[href="#mytab"]').on('shown', function (e){
google.maps.event.trigger(map, 'resize'); moveTo();
}); // realocate the map
I am using bootstrap, find the similar function in jquery UI.
我正在使用引导程序，在 jquery UI 中找到类似的功能。
回答by Saurav
By following the link provided from Pete, I was able to resolve that.
通过按照 Pete 提供的链接，我能够解决这个问题。
You probably have a function called calcRoute(). You might need to trigger this function twice. At first, when it's triggered it loads fine, but you might need to trigger that function again as well when you change the tab. That should work!
您可能有一个名为 calcRoute() 的函数。您可能需要两次触发此功能。起初，当它被触发时它加载得很好，但是当你更改选项卡时，你可能还需要再次触发该功能。那应该有效！
回答by Ethan
I worked this out by binding the map resizing to the controller which unhides a section container. The important part here as it relates to needing to click twice to resize the map lies in the setTimeout bit. That will provide just enough of a delay to allow the width to be calculated on wrapper around the map.
我通过将调整大小的地图绑定到取消隐藏部分容器的控制器来解决这个问题。此处的重要部分与需要单击两次以调整地图大小有关，因此位于 setTimeout 位。这将提供足够的延迟以允许在地图周围的包装器上计算宽度。
/**
* This example will work with foundation 4 sections. However, the idea is the same for any collapsed map.
* Load a map object
* Find it's parent (which is hidden)
* Bind a click event to the element which 'unhides' your container
* */
(function($) {
Drupal.behaviors.foundationCollapseHack = {
attach: function(context, settings) {
// check whether we have a map
if(typeof settings.vrListingMap != 'undefined') {
// on page load
$(window).load(function() {
// grab a map object
var map = Drupal.behaviors.vrwebListingMaps.map;
// if we have a section container
if($(map.b).parents('.section-container').length > 0) {
// find any maps in these tabs and bind a click to it
$(map.b).parents('section').find('p.title').children('a').click(function() {
// B.c of timing - it's important to wrap the resize stuff in a timeOut.
// This assures that getComputedStyle is not null when resize fires
setTimeout(function() {
var coord = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(new google.maps.LatLng(coord.lat(), coord.lng()), settings.vrListingMap.options.default_zoom);
}, 0 );
});
}
});
}
}
}
})(jQuery);
