Joe*_*Joe 8 jquery tabs google-maps google-maps-api-3 jquery-tabs
放置在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的人可以解决这个问题.
请帮我.
Jas*_*ard 12
rogercut的回答让我得到了我需要的地方.我正在使用Bootstrap选项卡,嵌套,无法让地图更新.
当我单击选项卡组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毫秒是安全的.
希望这有助于其他人.
我放弃了插件,并使用谷歌地图短代码,已经发布了我正在使用的主题.虽然我失去了自定义标记功能,但主题开发人员终于能够帮助实现这一切.他们将以下代码添加到短代码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问题.