Question

我正在接受this example to display tabbed infowindo for google maps：

使用下面这样的静态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&amp;v=2&amp;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>

它没有显示像标签？我做的任何错误？

由于

Answer 1

您需要进行一些更改：

当你想要附加完整元素.append()时，你要追加DOM元素而不是片段......所以你想要附加一个完整的HTML块，如下所示：

  .append("<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>TEST</p></div>")

如果您要追加，则需要先致电.empty()，或者不要使用.append()并改为使用.html()，如下所示：
```
  .html("<ul> \
         ....
         <div id='tabs-3'><h2>Third</h2><p>TEST</p></div>")
```
您需要在创建元素后创建标签窗口小部件，方法是在设置上述.tabs()调用内容后$("#tabs")上调用.html()。
< / LI>

您可能希望使用尺寸等but here's a demo of your current code/markup with the above changes, working和you can see/edit the code here。

google地图中的tabbed jquery div？

1 个答案: