0

我难住了。我有这张几乎所有事情都做对的测试地图。除了信息窗口内的工作 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>
4

1 回答 1

0

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

在调用后添加self.openInfoWindow()

google.maps.event.addListenerOnce(self.get('iw'),'domready',function(){$('#tabs').tabs();})
于 2013-09-23T23:47:44.147 回答