0

私は困惑しています。ほとんどすべてを正しく行うこのテスト マップがあります。情報ウィンドウ内の作業中の jQuery UI タブを除きます。

これは、「通常の」Google マップ アプリケーションでのソリューションです。

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

HTML を jQuery スクリプトに「ラップ」しています。データは HTML5 データ属性から取得されます。

UI タブを起動するためのスクリプトは、この jQuery("#tabs").tabs(); です。または $("#tabs").tab. 現在は頭に配置されています。タイミングが間違っているため、このコンテキストでは間違っています。しかし、私はこの問題を解決する方法の手がかりがありませんでした。これが適切なタイミングで 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

the infoWindow will be stored internally as a property named "iw", you may access it in you your code(as soon as it's initialized) via self.get('iw') .

Add this after the call of self.openInfoWindow() :

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