Google Maps API v3 + jQuery UI 标签的问题
Posted
技术标签:
【中文标题】Google Maps API v3 + jQuery UI 标签的问题【英文标题】：Problems with Google Maps API v3 + jQuery UI Tabs 【发布时间】：2010-11-28 12:41:56 【问题描述】：在使用 Google Maps API 在 jQuery UI 选项卡中呈现地图时，有许多问题似乎是众所周知的。我已经看到发布了关于类似问题的 SO 问题（例如here 和here），但那里的解决方案似乎只适用于 Maps API 的 v2。我查看的其他参考资料是 here 和 here，以及我可以通过谷歌搜索找到的几乎所有内容。
我一直在尝试将地图（使用 API 的 v3）填充到 jQuery 选项卡中，结果好坏参半。我正在使用所有东西的最新版本（目前是 jQuery 1.3.2，jQuery UI 1.7.2，不知道地图）。
这是标记和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）：
使用 jQuery UI 选项卡文档（以及我链接的两个问题的答案）中描述的偏左技术根本不起作用。事实上，功能最好的代码使用 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 docs 使用 Ajax 加载选项卡内容？我还没有机会玩弄它，但我的猜测是它会进一步破坏 Maps。让它发挥作用的机会有多大（或者不值得尝试）？ 如何让地图填满尽可能大的区域？我希望它填充标签并适应页面大小调整，就像在 maps.google.com 上完成的那样。但是，正如我所说，我似乎坚持只将绝对宽度和高度 CSS 应用于地图 div。很抱歉，如果这是冗长的，但这可能是 Maps API v3 + jQuery 选项卡的唯一文档。干杯！
【问题讨论】：
我发现谷歌地图组对我做 jquery + 地图很有帮助。不过我没有使用标签或 jquery ui。 据我所知，所有问题都是将地图放入 jQuery UI 选项卡的直接结果。虽然地图组中的人可能对此有经验，但它似乎不是这个问题的地方。我可能会四处打听。 无赖。他们对 API 部分非常有帮助，但在 jquery 方面无法帮助您。 有效的解决方案！！！ :) ***.com/questions/12641798/… 【参考方案1】：注意：此答案收到了无效的第 3 方编辑，它实质上替换了其内容，这是第 3 方编辑不应该做的事情。但是，结果可能比原来的更有用，所以下面给出两个版本：
原作者 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 marker = new google.maps.Marker(
position: myLatlng,
title:"Hello World!"
);
google.maps.event.addListener(map, "idle", function()
marker.setMap(map);
);
【讨论】：
太棒了。我在 jquery mobile / phonegap 应用程序上遇到了这个问题，这个修复为我解决了这个问题！ 这让我找到了答案，上面的 code.google.com 链接几天前更新了引导选项卡，这个谷歌地图问题 $('a[data-toggle="tab" ]').on('shown.bs.tab', function (e) google.maps.event.trigger(map, 'resize'); map.setZoom( map.getZoom() ); )【参考方案2】：实际上在上面划掉我的答案。 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 地图的 checkResize()。
【讨论】：
请编辑您的旧答案。最重要的是，我解决了 jQueryUI 网站建议的偏左技术在这种情况下不起作用的事实。 我很抱歉 - 我不知道我可以编辑现有评论。一直在写博客，只是习惯性地想着“一旦吐了，就收不回来了”。我能告诉你的是，我在此页面上的选项卡中完美地使用了地图/街景：jackying.brixwork.com/showlisting.php/63/… 我能做的最好的就是向你展示代码，也许你可以进行比较，看看有什么缺失/不同.. 我的街景在找到我发布的解决方案之前几天都没有工作。 #example 指的是什么？是地图还是标签的ID？ resizeMap() 是地图的 V3 函数吗？【参考方案3】：只需重新定义隐藏标签的 css 类：
.ui-tabs .ui-tabs-hide
position: absolute !important;
left: -10000px !important;
display:block !important;
【讨论】：
如果您没有生成 G 地图，则可以很好地解决 - 只需添加一个 on("click") 即可重置选项卡 div 的 css ..【参考方案4】：这就是您可以为 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
);
【讨论】：
我不确定空闲事件应该如何提供帮助。即使它触发了，如果在用户决定拖动之前渲染仍然混乱，然后变得空闲，那有什么好处呢？调整大小在选项卡显示事件的上下文中或在超时/间隔中很有用。【参考方案5】：我在标签显示后加载地图。
这很老套，但对我有用。只需将地图 iframe 的 url 存储在 iframes rel 属性中，如下所示：
<iframe rel="http://maps.google.com/maps?f=q&source=s..."></iframe>
此事件会将 iframe src 属性设置为 rel 内的 url。
$("#tabs").tabs(
show:function(event, ui)
var rel = $(ui.panel).find('iframe').attr('rel');
$(ui.panel).find('iframe').attr('src',rel);
);
【讨论】：
好的，您是如何从 iframe 中获得 lat 和 lon pos 坐标的？【参考方案6】：这并不能回答你所有的问题，但我已经让它工作了，所有其他答案都缺少一件事——当你用“resize”事件重绘地图时，你会失去地图所在的地方以。因此，如果您的地图以某个位置为中心，您还需要再次使用 setCenter 更新地图的中心。
此外，您不希望每次触发选项卡更改时都初始化地图，因为这样做效率不高，并且可能导致额外的地理编码。首先，您需要保存居中位置，可以是静态纬度/经度，或者如果进行地理编码，可能如下所示：
var address = "21 Jump St, New York, NY";
var geocoder = new google.maps.Geocoder();
var myOptions =
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var center;
geocoder.geocode( 'address': address, function(results, status)
if (status == google.maps.GeocoderStatus.OK)
center = results[0].geometry.location;
map.setCenter(center);
var marker = new google.maps.Marker(
map: map,
position: results[0].geometry.location
);
else
alert("Geocode was not successful for the following reason: " + status);
);
然后
$("#tabs").tabs();
$('#tabs').bind('tabsshow', function(event, ui)
if (ui.panel.id == "mapTab")
google.maps.event.trigger(map, "resize");
map.setCenter(center); // Important to add this!
);
其中 'mapTab' 是您的 mapTab 的 ID，而 'map' 是您的地图对象的 var 名称。
【讨论】：
这种触发地图调整大小的方法也适用于 twitter 引导选项卡，方法是将其绑定到选项卡单击事件:) 您的解决方案是这里最好的解决方案 imo【参考方案7】：确保在初始化选项卡的 sn-p 之前调用初始化地图的代码。
我唯一的烦恼是单击地图选项卡会使浏览器跳转到关注地图，并且它打破了 jQuery 放置在主选项卡容器周围的默认边框。我在地图标签的 a 标签中添加了一个 return false onclick 调用来处理第一个标签，并在主标签 div 上添加了一个简单的border-size: 0 来处理第二个标签。
所有这些都对我有用。
祝你好运！
【讨论】：
【参考方案8】：我已经通过每个论坛寻找答案......他们都说使用
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”是我的标签页的 ID，其中包含我的谷歌地图 v3。
希望这对你有用！
【讨论】：
这对我有用，非常简单和优雅。我尝试了其他解决方案，但我想因为我的设置与上面的示例不同，它不起作用（特别是 resize 方法调用）。但确实如此，谢谢！ 我发现使用激活效果更好，而不是显示。我不知道为什么，但 show 似乎冻结了我的标签，并且不允许它再次折叠。【参考方案9】：大家好，这段代码修复了错误，但在 IE 中不起作用。经过搜索和搜索，我发现我们必须添加以下行并且一切正常：
< !--[if IE]>
< style type="text/css">
.ui-tabs .ui-tabs-hide position: relative;
< /style>
< ![endif]-->
【讨论】：
【参考方案10】：我也遇到了这个问题，我是通过 AJAX 加载地图的。
百分比的问题似乎与面板没有任何设置大小（包含加载的标记的那个）有关。
在创建标签时使用以下代码对我有很大帮助：
$("#mainTabs").tabs('show': function(event, ui)
$(ui.panel).attr('style', 'width:100%;height:100%;');
return true;
);
【讨论】：
【参考方案11】：你可以打电话
map.fitBounds(边界)
会刷新
【讨论】：
fitBounds() 唯一的问题是，如果您使用标记并且用户拖动地图，地图将重新回到中心。【参考方案12】：非常烦人的问题，但通过一些修改是可以解决的。关键是当您选择一个新选项卡时，使相对位置#tabs 调整为每个选项卡的外部高度。我是这样做的：
$('#tabs').tabs(
selected:0,
'select': function(event, ui)
//this is the href of the tab you're selecting
var currentTab = $(ui.tab).attr('href');
//this is the height of the related tab plus a figure on the end to account for padding...
var currentInner = $(currentTab + '.detail-tab').outerHeight() + 40;
//now just apply the height of the current tab you're selecting to the entire position:relative #tabs ID
$('#tabs').css('height', currentInner);
);
这是我使用的 CSS：
#tabs position: relative;
/*set the width here to whatever your column width is*/
.ui-tabs-panel position:absolute;top:0px; left:0; width:575px;
.ui-tabs-panel.ui-tabs-hide display:block !important; position:absolute; left:-99999em; top:-9999em
【讨论】：
【参考方案13】：我通过Asynchronously loading the API 轻松完成了这项工作，然后简单地从<a> 标记中调用loadScript，该标记与onclick 事件中的相关选项卡相关联，如下所示：
<li><a href="#tab3" onclick="loadScript();">Maps</a></li>
【讨论】：
【参考方案14】：我遇到了同样的问题，但没有一个答案对我有用。也许我不知道如何在我的代码中使用它们，所以我在选项卡菜单中添加了一个 onclick 事件来初始化 Google 地图并且它正在工作。我不知道这是否是一个好习惯。
jQuery(document).ready(function($)
$( '#tabs' ).tabs();
var href = $('#tabs').find('a[href="#tabs-4"]');
(href).on('click',function()
initialize();
));
var map;
function initialize()
var mapOptions =
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
;
map = new google.maps.Map(document.getElementById('map'),
mapOptions);
<div id="tabs-4">
<div id="map" style="width:580px;height:380px;">
</div>
</div>
【讨论】：
【参考方案15】：Maps API v3 (exp) 和 jQuery UI 1.10 的另一种解决方案：
var pano = new google.maps.StreetViewPanorama(...);
$('#tabs').tabs(
'activate': function(event, ui)
if (ui.newPanel[0].id == "maps-tabs-id")
pano.setVisible(true);
);
【讨论】：
【参考方案16】：我按照 Keith 所说的做了，它对我有用，在我的情况下，我使用 jQuery 航点进行标签式导航，为了更好地理解我使用的代码：
在头部
<head>
<!-- Google Maps -->
<script>
function initialize()
var mapOptions =
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
;
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
function loadScript()
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' + '&signed_in=true&callback=initialize';
document.body.appendChild(script);
window.onload = loadScript;
</script>
</head>
在我的标签内：
<li><a href="#MyMap" onclick="loadScript();">My Map</a></li>
然后在DIV中
<div id="map_canvas"></div>
希望这对某人有所帮助，谢谢大家！
【讨论】：
【参考方案17】：我在Semantic UI 中遇到了同样的问题，在加载选项卡时调用init(); 函数时解决了这个问题，或者您也可以绑定它。
【讨论】：
以上是关于Google Maps API v3 + jQuery UI 标签的问题的主要内容，如果未能解决你的问题，请参考以下文章
Google Maps v3 - 防止 API 加载 Roboto 字体
Google Maps API V3 错误：RefererDeniedMapError
google maps js v3 api教程 -- 创建一个地图
JavaScript Google Maps API V3 Javascript基本示例