谷歌地图中的选项卡式jquery div？
谷歌地图中的选项卡式jquery div？
提问于 2010-08-25 08:52:48
我在关注this example to display tabbed infowindo for google maps
combined with this
使用下面这样的静态div没有任何问题：
<div id="tabs" class="tabs" style="display:none;">
<ul >
<li><a href='#tabs-1'>First</a></li>
<li><a href='#tabs-2'>Second</a></li
><li><a href='#tabs-3'>Third</a></li>
</ul>
<div id='tabs-1'><h2>First</h2><p>Test</p></div>
<div id='tabs-2'><h2>Second</h2><p>Test</p></div>
<div id='tabs-3'><h2>Third</h2><p>Decription.</p></div>
</div>但是当我尝试这样做的时候：
<html>
<head>
<title>Google Maps and jQuery</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAqZ_ITen_KJ5-KVdfyDOyoxR6BN8oWcJUlJGhIhjI1wReSYsY0hS2OV_Hx5AMbcOdbgiA0CKKbRMrIw" type="text/javascript"></script>
<link href="menu/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="menu/jquery.ui.core.js" type="text/javascript"></script>
<script src="menu/jquery.ui.widget.js" type="text/javascript"></script>
<script src="menu/jquery.tabs.js" type="text/javascript"></script>
<link href="menu/demos.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
var map = new GMap2($("#map").get(0));
var burnsvilleMN = new GLatLng(44.797916, -93.278046);
map.setCenter(burnsvilleMN, 8);
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
var markers = [];
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
marker = new GMarker(point);
map.addOverlay(marker);
markers[i] = marker;
}
$(markers).each(function (i, marker) {
$("<li />")
.html("Point " + i)
.click(function () {
displayPoint(marker, i);
})
.appendTo("#list");
GEvent.addListener(marker, "click", function () {
displayPoint(marker, i);
});
});
$("#tabs").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));
function displayPoint(marker, index) {
$("#tabs").hide();
var moveEnd = GEvent.addListener(map, "moveend", function () {
var markerOffset = map.fromLatLngToDivPixel(marker.getLatLng());
$("#tabs")
.append("<ul>")
.append("<li><a href='#tabs-1'>First</a></li>")
.append("<li><a href='#tabs-2'>First</a></li>")
.append("<li><a href='#tabs-3'>First</a></li>")
.append("</ul>")
.append("<div id='tabs-1'><h2>First</h2><p>TEST</p></div>")
.append("<div id='tabs-2'><h2>First</h2><p>TEST</p></div>")
.append("<div id='tabs-3'><h2>First</h2><p>TEST</p></div>")
.fadeIn()
.css({ top: markerOffset.y, left: markerOffset.x });
GEvent.removeListener(moveEnd);
});
map.panTo(marker.getLatLng());
}
});
$(function() {
$("#tabs").tabs();
});
</script>
<style type="text/css" media="screen">
#map { float:left; width:500px; height:500px; }
#tabs { position:absolute; padding:10px; background:#555; color:#fff; width:250px; }
#list { float:left; width:200px; background:#eee; list-style:none; padding:0; }
#list li { padding:10px; }
#list li:hover { background:#555; color:#fff; cursor:pointer; cursor:hand; }
</style>
</head>
<body>
<div id="map"></div>
<ul id="list"></ul>
<div id="tabs" class="tabs" style="display:none;">
</div>
</body>
</html>它不能像标签一样显示？？我做错了什么吗？
谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2010-09-25 23:05:43
您需要在此处进行一些更改：
- 当调用
.append()时，你想要追加完整的元素，你要追加的是DOM元素，而不是pieces...so。你想要追加一个完整的pieces...so块，如下所示：
.append(“\ first \ Second \ Third \\ FirstTEST \ SecondTEST \ThirdTEST”)
- 如果您想先调用
.empty()，或者不使用.append()而使用.html()，如下所示：
.html(“\ .... ThirdTEST")
- You需要在创建元素后创建选项卡小部件，方法是在上面使用
.html()调用设置内容之后，在$("#tabs")上调用.tabs()。
您可能想要使用维度，如but here's a demo of your current code/markup with the above changes, working和you can see/edit the code here。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3562120
复制相关文章
相似问题
腾讯云开发者
