Question

我很难过。我有这张测试图，几乎可以做任何事情。除了infowindow中的工作jQuery UI选项卡。

这是“普通”谷歌地图应用程序中的解决方案。

google.maps.event.addListener(infoWindow, 'domready', function() {
$("#tabs").tabs();
});

我将HTML“包装”到jQuery脚本中。数据来自HTML5数据属性。

启动ui标签的脚本就是这个jQuery（“＃tabs”）。tabs（）;或$（“＃tabs”）。标签。目前它被置于头脑中。由于时机错误，在这种情况下这是错误的。但我不知道如何解决这个问题。这就是如何在正确的时间触发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>

Answer 1

infoWindow将在内部存储为名为“iw”的属性，您可以通过self.get('iw')在您的代码中（一旦初始化）访问它。

在self.openInfoWindow()：

的调用后添加此内容

google.maps.event.addListenerOnce(self.get('iw'),'domready',function(){$('#tabs').tabs();})

jQuery ui标签在jQuery ui map中无法正常工作（谷歌地图V3）

1 个答案: