Google Maps API v3 + jQuery UI 标签的问题 [英] Problems with Google Maps API v3 + jQuery UI Tabs
问题描述
在使用 Google Maps API 在 jQuery UI 选项卡中呈现地图时，存在许多问题，这些问题似乎是众所周知的.我已经看到关于类似问题的 SO 问题(here 和 这里，例如)但那里的解决方案似乎只适用于 v2地图 API.我查看的其他参考资料是这里 和 此处，以及我可以通过谷歌搜索找到的几乎所有内容.
我一直在尝试将地图(使用 API 的 v3)填充到具有混合结果的 jQuery 选项卡中.我正在使用所有东西的最新版本(目前是 jQuery 1.3.2，jQuery UI 1.7.2，不知道地图).
这是标记 &javascript:
<div id="dashtabs"><span class="注销"><a href="go away">注销</a></span><!-- 标签 --><ul class="dashtabNavigation"><li><a href="#first_tab" >First</a></li><li><a href="#second_tab" >Second</a></li><li><a href="#map_tab" >地图</a></li><!-- 标签容器--><div id="first_tab">这是我的第一个标签</div><div id="second_tab">这是我的第二个标签</div><div id="map_tab"><div id="map_canvas"></div>和
$(document).ready(function() {无功映射 = 空；$('#dashtabs').tabs();$('#dashtabs').bind('tabsshow', function(event, ui) {if (ui.panel.id == 'map_tab' && !map){地图 = 初始化地图()；google.maps.event.trigger(map, 'resize');}});});函数初始化映射(){//现在只是一些罐头地图var latlng = new google.maps.LatLng(-34.397, 150.644);var myOptions = {变焦:8，中心:latlng，mapTypeId: google.maps.MapTypeId.ROADMAP};返回新的 google.maps.Map($('#map_canvas')[0], myOptions);}这是我发现有效/无效的内容(对于 Maps API v3):
- 使用 jQuery UI Tabs 文档(以及我链接的两个问题的答案)中描述的偏左技术根本不起作用.事实上，功能最好的代码使用 CSS
.ui-tabs .ui-tabs-hide { display: none;}代替. - 让地图在选项卡中显示的唯一方法是将
#map_canvas的 CSS 宽度和高度设置为绝对值.将宽度和高度更改为auto或100%会导致地图根本不显示，即使它已经成功渲染(使用绝对宽度和高度). - 我在 Maps API 之外的任何地方都找不到它的文档，但是
map.checkResize()将不再起作用.相反，您必须通过调用google.maps.event.trigger(map, 'resize')来触发调整大小事件. - 如果地图未在绑定到
tabsshow事件的函数内初始化，则地图本身会正确呈现，但控件却没有 - 大多数只是明显缺失.
那么，这是我的问题:
- 有没有其他人有完成同样壮举的经验?如果是这样，您如何确定实际可行的方法，因为记录的技巧不适用于 Maps API v3?
- 根据 jQuery UI 文档使用 Ajax 加载标签内容怎么样?我还没有机会玩它，但我的猜测是它会破坏地图更多.让它发挥作用的机会有多大(或者不值得尝试)?
- 如何使地图填满可能的最大区域?我希望它可以填充选项卡并适应页面大小调整，就像在 maps.google.com 上完成的那样.但是，正如我所说，我似乎只对地图 div 应用绝对宽度和高度 CSS.
抱歉，这可能是冗长的，但这可能是 Maps API v3 + jQuery 选项卡的唯一文档.干杯！
注意:此答案收到了无效的 3rd 方编辑，该编辑实质上替换了其内容，这是 3rd 方编辑器不应该做的.然而，结果可能比原来的更有用，所以现在给出两个版本:
<小时>原作者 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.
<小时>- 用户 Eugeniusz Fizdejko 的 2012 年完整重写表单:
对我来说添加标记时有效:
var 标记 = new google.maps.Marker({位置:myLatlng，标题:世界你好！"});google.maps.event.addListener(地图，空闲"，函数(){标记.setMap(地图);});There are a number of problems, which seem to be fairly well-known, when using the Google Maps API to render a map within a jQuery UI tab. I've seen SO questions posted about similar issues (here and here, for example) but the solutions there only seem to work for v2 of the Maps API. Other references I checked out are here and here, along with pretty much everything I could dig up through Googling.
I've been trying to stuff a map (using v3 of the API) into a jQuery tab with mixed results. I'm using the latest versions of everything (currently jQuery 1.3.2, jQuery UI 1.7.2, don't know about Maps).
This is the markup & 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>
and
$(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);
}
And here's what I've found that does/doesn't work (for Maps API v3):
- Using the off-left technique as described in the jQuery UI Tabs documentation (and in the answers to the two questions I linked) doesn't work at all. In fact, the best-functioning code uses the CSS
.ui-tabs .ui-tabs-hide { display: none; }instead. - The only way to get a map to display in a tab at all is to set the CSS width and height of
#map_canvasto be absolute values. Changing the width and height toautoor100%causes the map to not display at all, even if it's already been successfully rendered (using absolute width and height). - I couldn't find it documented anywhere outside of the Maps API, but
map.checkResize()won't work anymore. Instead, you have to fire a resize event by callinggoogle.maps.event.trigger(map, 'resize'). - If the map is not initialized inside of a function bound to a
tabsshowevent, the map itself is rendered correctly but the controls are not - most are just plain missing.
So, here are my questions:
- Does anyone else have experience accomplishing this same feat? If so, how did you figure out what would actually work, since the documented tricks don't work for Maps API v3?
- What about loading tab content using Ajax as per the jQuery UI docs? I haven't had a chance to play around with it but my guess is that it's going to break Maps even more. What are the chances of getting it to work (or is it not worth trying)?
- How do I make the map fill the largest possible area? I'd like it to fill the tab and adapt to page resizes, much in the way that it's done over at maps.google.com. But, as I said, I appear to be stuck with applying only absolute width and height CSS to the map div.
Sorry if this was long-winded but this might be the only documentation for Maps API v3 + jQuery tabs. Cheers!
Note: this answer received an invalid 3rd party edit which essentially replaced its content, something that a 3rd party editor should not do. However, the result may be more useful than the original, so both versions are now given below:
Original author Anon's version from 2010, after one edit by Anon
google.maps.event.trigger(map, 'resize'); map.setZoom( map.getZoom() );
is suggested by http://code.google.com/p/gmaps-api-issues/issues/detail?id=1448 as a v3 substitute for v2's checkResize().
Blech - bad google, no cookie.
- User Eugeniusz Fizdejko's complete rewrite form 2012:
For me works when adding a marker:
var marker = new google.maps.Marker({
position: myLatlng,
title:"Hello World!"
});
google.maps.event.addListener(map, "idle", function(){
marker.setMap(map);
});
这篇关于Google Maps API v3 + jQuery UI 标签的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
