Mat*_*all 70 jquery google-maps jquery-ui-tabs google-maps-api-3
当使用Google Maps API在jQuery UI选项卡中呈现地图时,有许多问题似乎都是众所周知的.我已经看到关于类似问题发布的SO问题(例如这里和这里),但那里的解决方案似乎只适用于Maps API的v2.我检查过的其他参考文献在这里和这里,以及我可以通过谷歌搜索挖掘的几乎所有内容.
我一直在尝试将地图(使用API的v3)填充到具有混合结果的jQuery选项卡中.我正在使用最新版本的一切(目前jQuery 1.3.2,jQuery UI 1.7.2,不了解Maps).
这是标记和javascript:
<body>
<div id="dashtabs">
<span class="logout">
<a href="go away">Log out</a>
</span>
<!-- tabs -->
<ul class="dashtabNavigation">
<li><a href="#first_tab" >First</a></li>
<li><a href="#second_tab" >Second</a></li>
<li><a href="#map_tab" >Map</a></li>
</ul>
<!-- tab containers -->
<div id="first_tab">This is my first tab</div>
<div id="second_tab">This is my second tab</div>
<div id="map_tab">
<div id="map_canvas"></div>
</div>
</div>
</body>
和
$(document).ready(function() {
var map = null;
$('#dashtabs').tabs();
$('#dashtabs').bind('tabsshow', function(event, ui) {
if (ui.panel.id == 'map_tab' && !map)
{
map = initializeMap();
google.maps.event.trigger(map, 'resize');
}
});
});
function initializeMap() {
// Just some canned map for now
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
return new google.maps.Map($('#map_canvas')[0], myOptions);
}
以下是我发现的功能/不起作用(对于Maps API v3):
.ui-tabs .ui-tabs-hide { display: none; }代替.#map_canvas为绝对值.将宽度和高度更改为auto或100%导致地图根本不显示,即使它已经成功渲染(使用绝对宽度和高度).map.checkResize()不再适用.相反,您必须通过调用来触发resize事件google.maps.event.trigger(map, 'resize').tabsshow事件的函数内初始化,则地图本身会正确呈现,但控件不会 - 大多数都只是缺失.所以,这是我的问题:
很抱歉,如果这是冗长的,但这可能是Maps API v3 + jQuery选项卡的唯一文档.干杯!
小智 22
注意:此答案收到了无效的第三方编辑,这实际上取代了其内容,这是第三方编辑不应该做的事情.但是,结果可能比原始结果更有用,因此现在给出两个版本:
原作者Anon的版本来自2010年,经过Anon的一次编辑
google.maps.event.trigger(map,'resize'); map.setZoom(map.getZoom());
http://code.google.com/p/gmaps-api-issues/issues/detail?id=1448建议 将v3替换为v2的checkResize().
Blech - 糟糕的谷歌,没有cookie.
对我来说,在添加标记时起作用:
var marker = new google.maps.Marker({
position: myLatlng,
title:"Hello World!"
});
google.maps.event.addListener(map, "idle", function(){
marker.setMap(map);
});
jef*_*kee 13
实际上抓住我上面的答案.jQueryUI网站有答案,这里是:
为什么...
...我的滑块,谷歌地图,sIFR等在放入隐藏(非活动)标签时不起作用？
任何需要进行初始化计算以进行初始化的组件都不能在隐藏选项卡中工作,因为选项卡面板本身是通过display:none隐藏的,因此内部的任何元素都不会报告它们的实际宽度和高度(大多数浏览器中为0) .
有一个简单的解决方法.使用左侧技术隐藏非活动选项卡面板.例如,在样式表中替换类选择器".ui-tabs .ui-tabs-hide"的规则
.ui-tabs .ui-tabs-hide {
position: absolute;
left: -10000px;
}
对于Google地图,您还可以在选项卡显示后调整地图大小,如下所示:
$('#example').bind('tabsshow', function(event, ui) {
if (ui.panel.id == "map-tab") {
resizeMap();
}
});
resizeMap()将在特定地图上调用Google Maps的checkResize().
小智 12
只需重新定义隐藏选项卡的css类:
.ui-tabs .ui-tabs-hide {
position: absolute !important;
left: -10000px !important;
display:block !important;
}
这是您可以为Google Maps v3做的事情:
google.maps.event.addListenerOnce(map, 'idle', function() {
google.maps.event.trigger(map, 'resize');
map.setCenter(point); // be sure to reset the map center as well
});
小智 1
我已经通过每个论坛寻找这个问题的答案......他们都说使用
map.checkResize()
解决方案....似乎没有任何作用...然后我...为什么不在显示选项卡时初始化选项卡，所以我使用了这个
$("#servicesSlider ").tabs({
//event: 'mouseover'
fx: { height: 'toggle', opacity: 'toggle'},
show: function(event, ui) {
if (ui.panel.id == "service5") {
$(ui.panel).css("height","100%")
initialize()
}}
});
“service5”是保存我的谷歌地图 v3 的选项卡的 ID。
希望这对你有用！
| 归档时间： |
|
| 查看次数： |
88726 次 |
| 最近记录： |