вкладка JQuery Div в Google Maps? - PullRequest
Новая
       7

вкладка JQuery Div в Google Maps?

0 голосов
/ 25 августа 2010

Я слежу за в этом примере, чтобы отобразить вкладку infowindo для карт Google :

в сочетании с этим

Использование статического 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>

Это не отображается как вкладки ?? Любая ошибка, которую я сделал?

Спасибо

1 Ответ

2 голосов
/ 25 сентября 2010

Вам нужно несколько изменений здесь:

  • При вызове .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() вызова выше .

Возможно, вы захотите поиграть с размерами и тому подобным, , но вот демонстрация вашего текущего кода / разметки с вышеуказанными изменениями, работающими и , вы можете увидеть / отредактировать код здесь .

...