谷歌地图放置在jQuery标签内时不起作用是一个遍布网络的问题。到目前为止，在我的研究中，似乎没有一种解决方案可行。希望有人在这里帮忙...
这是Firefox 10，Chrome 17，Safari 5.1.2，Opera 11.61中错误的屏幕截图。 http://www.flickr.com/photos/75523633@N04/6932970713/
错误在IE8中不存在，在9中是间歇性的。在Firefox中，当你打开FireBug时它会消失。
该网站位于Wordpress 3.3.1中，并通过插件生成/检索地图。我使用哪个地图插件似乎并不重要;错误保持不变。根据我的研究，这似乎是选项卡和Google Map API javascript之间的js / jQuery问题，而不是Wordpress /插件问题。
这是我的代码。现在，我正在使用wp-gmappity-easy-google-maps插件来制作地图，但我也尝试了综合谷歌地图插件。两者都在标签之外工作得很好。
HTML：
// Header calls:
<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'></script>
<script type='text/javascript' src='http://xxxxxxxxxx.com/wp-content/themes/zzzzzzzzzz/scripts/tabs.min.js'></script>
// HTML Body:
<div class="tabs_framed_container">
<ul class="tabs_framed">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
<li><a href="#">Map Tab</a></li>
<li><a href="#">Tab 3</a></li>
</ul>
<div class="tabs_framed_content">
<h2>Tab 1 Content</h2>
<!-- Some Content -->
</div>
<div class="tabs_framed_content">
<h2>Tab 2 Content</h2>
<!-- Some Content -->
</div>
<h2>Tab 3 Content</h2>
<!-- Some Content -->
</div>
<div class="tabs_framed_content">
<div class="map_container">
<div style="width:900px;margin-left:auto;margin-right:auto;">
<div class="wpgmappity_container" id="wpgmappity-map-1" style="width:900px;height:400px;margin-left:auto;margin-right:auto;"></div>
</div>
<script type="text/javascript">
function wpgmappity_maps_loaded1() {
var latlng = new google.maps.LatLng(42.4005322,-71.2750094);
var options = {
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl : true,
zoomControlOptions :
{
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.TOP_LEFT
},
mapTypeControl : true,
mapTypeControlOptions :
{
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_RIGHT
},
scaleControl : true,
scaleControlOptions :
{
position: google.maps.ControlPosition.TOP_LEFT
},
streetViewControl : true,
streetViewControlOptions :
{
position: google.maps.ControlPosition.TOP_LEFT
},
panControl : false, zoom : 14
};
var wpgmappitymap1 = new google.maps.Map(document.getElementById('wpgmappity-map-1'), options);
var point0 = new google.maps.LatLng(42.4005322,-71.2750093);
var marker1_0 = new google.maps.Marker({
icon : 'http://xxxxxxxxxx.com/wp-content/themes/zzzzzzzzzz/images/mapmarker.png',
position : point0,
map : wpgmappitymap1
});
}
jQuery(window).load(function() {
wpgmappity_maps_loaded1();
});
</script>
</div>
</div>
<div class="tabs_framed_content">
<h2>Tab 2 Content</h2>
<!-- Some Content -->
</div>
以下是相关的CSS：
.tabs_framed{padding:0;margin:0;list-style-type:none;clear:left;height:25px;border-bottom:1px solid #E5E5E5;}
.tabs_framed_container{margin-bottom:40px;}
.tabs_framed a{
display:block; position:relative; background:#fafafa; border:1px solid #E5E5E5; padding:7px 30px; margin-right:2px;
font-size:10px; text-decoration:none; text-transform:uppercase; letter-spacing:1px; line-height:10px; color:#777;
opacity:1; -webkit-transition:all .5s ease; -moz-transition:all .5s ease; -o-transition:all .5s ease; transition:all .5s ease;
}
.tabs_framed a:hover{color:#20548B;text-decoration:none;background:#fff;}
.tabs_framed a.current{color:#000;cursor:default;border-bottom:1px solid #fff;background:#fff;}
.tabs_framed li,{padding:0;margin:0;list-style-type:none;float:left;}
.tabs_framed_content{display:none;background-color:#fff;border:1px solid #E5E5E5;border-width:0 1px 1px 1px;padding:30px 30px 15px 30px;}
div.wpgmappity_container img {
background-position: 0% 0%;
background-color: none !important;
max-width: none !important;
background-image: none !important;
background-repeat: repeat !important;
background-attachment: scroll !important;
}
以下是管理我的标签的文件的链接： http://themes.mysitemyway.com/awake/wp-content/themes/awake/lib/scripts/tabs.min.js
flowplayer.org/tools/forum/25/79274是我发现的一个解决方案（滚动到底部）。但是，checkResize和resizeMap不再有效（请参阅code.google.com/apis/maps/documentation/javascript/reference.html#Map上的api参考，向下滚动一点“事件”并找到google.maps.event。触发（map，'resize'），这显然是替换代码）。 www.raymondcamden.com/index.cfm/2009/6/5/jQuery-Tabs-and-Google-Maps是另一个太旧的文章。
我见过这个提议：
jQuery(document).ready(function(){
jQuery('.tabs_container').bind('tabsshow', function(event, ui) {
if (ui.panel.id == "map-tab") {
google.maps.event.trigger(map, 'resize');
}
});
});
但我不知道如何实现它（尝试了几种方法但没有成功）或者它是否可行。
从我的所有研究中，当选择包含地图的选项卡时，您似乎必须触发地图调整大小事件。到目前为止，我没有运气适应任何解决方案 - 特别是因为我熟悉js / jQuery。似乎熟悉js或jQuery的人可以解决这个问题。
请帮帮我。
答案 0 :(得分：12)
当我点击标签组2（＃tg2）时，地图选项卡是第一个显示的标签。如果有人在标签组2中点击了第二级标签（＃tab1），我还需要触发调整大小。
单击处理程序可以正常工作，但问题是单击时，选项卡仍然隐藏...通过设置一个小延迟，它会在调整大小开始之前为标签显示时间。
// Create Map
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(48.8582, 2.2945), //I see Paris, I see France
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
//Bind click handlers - Here's the important part
$('a[href=#tab1], a[href=#tg2]').on('click', function() {
setTimeout(function(){
google.maps.event.trigger(map, 'resize');
}, 50);
});
因此，我们告诉浏览器在点击后等待50ms进行调整大小。在我的测试中，50ms有足够的时间来显示标签，但又足够短，以至于用户并不会注意到它。事实上，我测试的4-5台机器上的测试延迟只有1毫秒 - 即使是我们坐在存储器中的狗慢速笔记本电脑。 50毫秒是安全的。
希望这有助于其他人。
答案 1 :(得分：7)
我放弃了插件并使用了谷歌地图短代码，该代码已针对我正在使用的主题发布。虽然我失去了自定义标记功能，但主题开发人员终于能够帮助实现这一切。他们将以下代码添加到短代码PHP文件中。
jQuery('ul.tabs_framed').data('tabs').onClick(function(e,index) {
resizeMap(" . 'map'.$map_id .")
});
function resizeMap(m) {
x = m.getZoom();
c = m.getCenter();
google.maps.event.trigger(m, 'resize');
m.setZoom(x);
m.setCenter(c);
};
当单击包含地图的选项卡时，此代码会触发地图重新加载。它还会重新定位地图。此解决方案为我解决了问题，谷歌地图现在显示在jquery选项卡中。希望这里的一些更精通javascript的用户（以及插件开发人员!!!）可以将此解决方案适应他们自己的map-in-tabs问题。
答案 2 :(得分：1)
在开发包含地图标签内容的网站时，我遇到了同样的问题。 该网站为http://samet.com.ar（西班牙文，点击地图图标或“ubicacion”链接）。 每当tab选项卡与其选项卡组中的其他选项卡一起加载时，您提到的相同错误就会出现。 我发现如果我可以设法在其他选项卡之后加载一些时间，那么就没有任何问题了。
我有能力做到这一点，因为无论如何我给了包装器显示的时间为3.5秒，以便加载所有背景照片并且加载时地图在隐形标签中，所以我不需要它立即出现。
然后地图选项卡在整个包装器之后立即加载为回调函数。 如果您检查页面，请查找id'panel-container'。在'窗格'里面你会发现最后加载的地图div。
我在index.php页面中使用的相关jQuery代码如下：
<script type='text/javascript'>
( function( $ ) {
// for SOF post --- previous code deleted ---
$( "#wrapper" ).delay( 3500 ).fadeIn( "slow",function() {
// Animation complete
<?php $post_map = get_posts('name=map');?>
$( "#map" ).delay( 1000 ).append( <?php echo "'".$post_map[0]->post_content."'"; ?> );
} );
} )( jQuery );
</script>
我希望这会有所帮助。 忘了提到地图代码是作为特定帖子中的内容嵌入的。 （顺便说一句，地图标记位于右上方，用于显示主要通道。）
干杯！
答案 3 :(得分：1)
问题（如上所述和其他地方）是map div必须是可见的才能工作。因此，在可见的选项卡中加载地图。然后，如果您愿意，请切换到要显示的选项卡。
为此，我向地图添加了一次性事件监听器。在该功能内部，我更改为第一个选项卡。在加载期间，您会在更改选项卡之前看到地图区域大约一秒钟。优点是用户无需为此工作。
google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
$("#Tabs").tabs('select',0);
});
答案 4 :(得分：1)
以上答案中没有一个是完全正确的。出现此问题的原因是地图画布设置为width：0;在加载之前默认值为0，然后期望您传递维度或从父级获取维度，因为这是在jQuery选项卡内部没有维度。
如上所述，绑定到标签的click事件并设置map_canvas维度，然后调用google.maps.event.trigger（）
$(function(){
$('#maptab').bind('click',function() {
var w = $('#map_view').width();
var h = $('#map_view').height();
$('#map_canvas').css({ width: w, height: h });
google.maps.event.trigger(map, 'resize');
});
});
答案 5 :(得分：1)
在我在标签内部实施google-map时遇到同样的问题，特别是当地图不在第一个选择中时。但我已经尝试过，并且使用这样一个简单的解决方案：
制作一个简单的js函数：
<script type="text/javascript">
function ResetMap() {
google.maps.event.trigger(map, 'resize');
}
</script>
<li><a href="#tab1">Select Tab1</a></li>
<li onClick="ResetMap();"><a href="#tab2">Select Google Map</a></li>
<div class="tab1-content" id="tab1">Content tab1</div>
<div class="tab2-content" id="tab2"><?php include_once ('google-map.php') ?></div>
答案 6 :(得分：1)
我为bootstrap Tab解决了这个问题。只需在显示地图容器后调用resize map函数即可。
我在initialize（）函数中添加了以下内容：
jQuery('.nav-tabs a[href="#my-map"]').on('shown.bs.tab', function(){
google.maps.event.trigger(map, 'resize');
map.setZoom(15); //You need to reset zoom
map.setCenter(myLatlng); //You need to reset the center
});
答案 7 :(得分：1)
这可能不适合所有人！ 对我有用的一个解决方案是隐藏选项卡显示但在某个地方“对用户不可见”。这将允许地图渲染，即使它不在第一个/活动选项卡中。 找到一种方法来定位隐藏的标签：
.tab-hidden{
position: absolute !important;
left: -10000px !important; /* maybe not that much */
display:block !important;
width:100% !important; /* I found this to be very important*/
}
地图宽度100％而非固定宽度。
答案 8 :(得分：0)
尝试一下：
更改
<li><a href="#">Map Tab</a></li>
到
<li><a href="#" id="maptab">Map Tab</a></li>
然后添加此javascript
$(document).ready(function(){
$('#maptab').bind('onClick', function() {
google.maps.event.trigger(map, 'resize');
});
});
在页面顶部的脚本标记中。这应该为你做什么：
通过将id属性添加到标签链接，您可以明确指定其中有一个地图。然后，您正在侦听选择选项卡时触发的jQuery选项卡库提供的onClick事件，这会触发重新调整地图大小。
答案 9 :(得分：0)
问题很简单。地图必须在具有尺寸的元素中渲染。如果使用隐藏选项卡内容的选项卡系统，则在隐藏父级时，选项卡内容中的所有元素都没有维度。如果jQuery tools css允许你这样做，请在屏幕外设置“隐藏”内容而不是隐藏。
为了使用： google.maps.event.trigger（map，'resize'）;
您需要访问初始映射对象变量“var wpgmappitymap1”，但其范围在map init函数中。如果你把它变成一个全局变量，你可以把它放在你的调整大小触发器
中 google.maps.event.trigger(wpgmappitymap1, 'resize');
答案 10 :(得分：0)
我遇到了同样的问题，这是我的解决方案。
我添加了ajaxComplete函数，该函数在所有ajax请求或帖子完成时触发。
<script type="text/javascript">
$(document).ajaxComplete(function(e){
calculateRoute("from","to");
});
</script>
答案 11 :(得分：0)
它为我工作，符合我的要求，你可以用它作为参考：
<script type="text/javascript">
function setCookie (name, value, expires, path, domain, secure) {
document.cookie = name + "=" + escape(value) +
((expires) ? "; expires=" + expires : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
}
function getCookie (name) {
var cookie = " " + document.cookie;
var search = " " + name + "=";
var setStr = null;
var offset = 0;
var end = 0;
if (cookie.length > 0) {
offset = cookie.indexOf(search);
if (offset != -1) {
offset += search.length;
end = cookie.indexOf(";", offset);
if (end == -1) {
end = cookie.length;
}
setStr = unescape(cookie.substring(offset, end));
}
}
if (setStr == 'false') {
setStr = false;
}
if (setStr == 'true') {
setStr = true;
}
if (setStr == 'null') {
setStr = null;
}
return(setStr);
}
function hidePopup() {
setCookie('popup_state', false);
document.getElementById('popup').style.display = 'none';
document.getElementById('hiding').style.display = 'block';
google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
}
function showPopup() {
setCookie('popup_state', null);
document.getElementById('popup').style.display = 'block';
document.getElementById('hideup').style.display = 'none';
google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
}
function checkPopup() {
if (getCookie('popup_state') == null) { // if popup was not closed
document.getElementById('popup').style.display = 'block';
document.getElementById('hiding').style.display = 'block';
google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
}
}
</script>
<body onload="checkPopup();">
<div class="map-button" id="hiding"><a href="#" onclick="showPopup(); return false;"><img src="images/map_magnify.png" alt="" title="Show Google Map" ></a></div>
<div class="map-button" id="popup" style="display:none"> <a href="#" onclick="hidePopup(); return false;"><img src="images/map_delete.png" alt="" title="Hide Google Map" ></a>
<div id="gmap"></div>
</div>
</body>
注意：你可以制作CSS课程＆＃39; map-button＆＃39;用于根据需要定位按钮。放置你自己的图像。替换id =＆＃34; gmap＆＃34;就像你的。希望它可以帮到你。
答案 12 :(得分：0)
在css中试试这个：
.tab-content > .tab-pane:not(.active),
.pill-content > .pill-pane:not(.active) {
display: block;
height: 0;
overflow-y: hidden;
}