【发布时间】：2013-09-28 19:54:21
【问题描述】：
我被难住了。我有这张几乎所有事情都做对的测试地图。除了信息窗口内的一个工作的 jQuery UI 选项卡。
这是“普通”谷歌地图应用程序中的解决方案。
google.maps.event.addListener(infoWindow, 'domready', function() {
$("#tabs").tabs();
});
我正在将 HTML “包装”到 jQuery 脚本中。数据是从 HTML5 数据属性中获取的。
启动 ui 标签的脚本是这个 jQuery("#tabs").tabs();或 $("#tabs").tab。 目前它被放置在 head 中。在这种情况下是错误的，因为时机不对。 但我不知道如何解决这个问题。这就是如何在正确的时间触发 ui-tabs 脚本，所以我得到了我想要的信息窗口。
感谢您在此问题上的任何帮助。这几天我一直在敲头，到处找都无济于事。
这是我的页面
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demokart javascript debug</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<link type="text/css" href="jquery-ui-1.8rc3.custom.css" rel="stylesheet" />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" media="screen" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
jQuery(document).ready(function() {
jQuery("#tabs").tabs();
});
</script>
<script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/demos/js/demo.js"></script>
<script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/jquery.ui.map.js"></script>
</head>
<body >
<div id="map_canvas" class="map rounded" style="height:465px;"></div>
<p>Pre text</p>
<ul>
<li id="#tabs" data-gmapping='{"id":"00007","latlng":{"lat":59.756524742079,"lng": 9.99929666519165},"tags":"Company name", "ikon":"some_pointer.gif", "tab1":" tab1 1 all data here", "tab2":"tab 2 all data ", "tab3":"Tab3 all data here"}'>
<p >One place we want to show </p>
</li>
<li class="#tabs" data-gmapping='{"id":"00008","latlng":{"lat":59.17279,"lng": 9.61545},"tags":Another company", "ikon":"some_pointer.gif", "tab1":" 1 all data here", "tab2":"tab 2 all data here", "tab3":"tab 3 all data here"}'>
<p >Some text about this place </p>
</li>
</ul>
<script type="text/javascript">
$(function() {
demo.add(function() {
$('#map_canvas').gmap({'disableDefaultUI':true, 'callback': function() {
var self = this;
$("[data-gmapping]").each(function(i,el) {
var data = $(el).data('gmapping');
self.addMarker({'id': data.id, 'tags':data.tags, 'position': new google.maps.LatLng(data.latlng.lat, data.latlng.lng), 'icon':data.ikon, 'bounds':true }, function(map,marker) {
$(el).click(function() {
$(marker).triggerEvent('click');
});
}).click(function() {
var text = [
'<div id="tabs"><ul><li><a href="#tab-1">Adress</a></li>',
'<li><a href="#tab-2">Contact</a></li>',
'<li><a href="#tab-3">Services</a></li></ul>',
'<div id="tab-1">',
'<b>' + data.tab1 + '</b> - ' + '<BR>',
'</div>',
'<div id="tab-2">',
'<b>' + data.tab2 + '<BR>',
'</div>',
'<div id="tab-3">',
data.tab3 + '<BR>',
'</div>'
].join('');
self.openInfoWindow({ 'content': text}, this);
google.maps.event.addListenerOnce(self.get('iw'),'domready',function(){$('#tabs').tabs();}) });
});
}});
}).load();
});
</script>
</body>
</html>
【问题讨论】：
-
无法正常工作的 jsfiddle jsfiddle.net/blindern1/r7QmV/1
-
您能否简化代码以包含复制问题所需的所有内容（所有不公开的 css 和脚本，例如“js/demo.js”...）
-
我已经添加了缺失脚本的链接。这就是我要做的。
-
代码已更新并可正常工作（我假设）。
-
根据我的经验，在 Google 地图中使用 jQuery UI 选项卡非常尴尬（尤其是在 infoWindow 中）。您需要了解的不仅仅是如何初始化
.tabs(...)。
标签： jquery jquery-ui google-maps-api-3 jquery-ui-map html5-data