Question

我在将一个jQuery UI标签菜单放在Google Map InfoWindow中时遇到了一些问题。

infowindows是从Fusion Table创建的，Fusion Table分层放在基本地图上。我有一个使用Maps infowindows完美运行的例子（仍然有样式要完成，但数据不完整）

然而，infowindows有点限制性，我需要更多的样式灵活性，所以我切换到使用InfoBox.js。值得庆幸的是，它非常适合，而我所要做的就是更换一些选择器以便它们完全匹配。盒子工作完美但是jquery选项卡现在根本不起作用。应该在HTML中创建的类属性不是。

这是使用infowindows的原始脚本：

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/base/jquery-ui.css" rel="stylesheet" /> 
<script src="http://www.google.com/jsapi"></script> 
<script type="text/javascript">
    google.load('maps', '3',  {other_params:'sensor=false'});
    google.load('jquery', '1');
    google.load("jqueryui", "1");
</script> 
<script type="text/javascript"> 
  function initialize() {
    var map = new google.maps.Map(document.getElementById('map-canvas'), {
      zoom: 7,
      center: new google.maps.LatLng(52.51112385136416, -3.718475750781187),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var layer = new google.maps.FusionTablesLayer({
      query: {
        select: "col2>>1",
        from: "1GbF1tKsgQshl1kxOLNDGgw52Wv8bWYL6njpcKVI"
      },
      styleId: 2,
      map: map,
      suppressInfoWindows: true
    });

    var infowindow = new google.maps.InfoWindow();

    google.maps.event.addListener(layer, 'click', function(e) {

      var childpoverty = e.row['Child poverty rate'].value;
      if (childpoverty > 22) {
        pcolour = '<p style="color: red; font-weight: bold;">';
      } 
      else if (childpoverty > 13) {
        pcolour = '<p style="color: orange; font-weight: bold;">';
      } 
      else {
        pcolour = '<p style="color: green; font-weight: bold;">';
      };

      var sponsored = e.row['Sponsorship'].value;
      if (sponsored == 1) {
       contentString = [
        '<div class="tabs">',
            '<ul>',
                '<li><a href="#tab-1"><span>Sponsor</span></a></li>',
                '<li><a href="#tab-2"><span>Information</span></a></li>',
            '</ul>',
            '<div id="tab-1">',
                '<p style="font-weight: bold;">' + e.row['Local authority'].value + '</p>',
                '<img src="' + e.row['Logo'].value + '" width="100"></img>',
            '</div>',
            '<div id="tab-2">',
                '<p style="font-weight: bold;">' + e.row['Local authority'].value + '</p>',
                '<p>' + e.row['Political control'].value + '</p>',
                pcolour + e.row['Child poverty rate'].value + '</p>',
                '<p>' + e.row['Unemployment rate'].value + '</p>',
            '</div>',
        '</div>'
      ].join('')}
      else {
        contentString = [
          '<div class="tabs">',
            '<p style="font-weight: bold;">' + e.row['Local authority'].value + '</p>',
            '<p>' + e.row['Political control'].value + '</p>',
            pcolour + e.row['Child poverty rate'].value + '</p>',
            '<p>' + e.row['Unemployment rate'].value + '</p>',
          '</div>'
       ].join('')};

      infowindow.setContent(contentString);
      infowindow.setPosition(e.latLng);
      infowindow.open(map);
      $(".tabs").tabs({ selected: 0 });
    });
  }

</script>

这是带有信息箱的脚本

    <link type="text/css" href="http://code.jquery.com/ui/1.8.12/themes/smoothness/jquery-ui.css" rel="stylesheet" />   
<script src="http://www.google.com/jsapi"></script> 
<script type="text/javascript">
    google.load('maps', '3', {other_params:'sensor=false'});
    google.load('jquery', '1');
    google.load("jqueryui", '1');
</script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox_packed.js"></script>
<script type="text/javascript"> 

  function initialize() {
    var map = new google.maps.Map(document.getElementById('map-canvas'), {
      zoom: 7,
      center: new google.maps.LatLng(52.51112385136416, -3.718475750781187),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var layer = new google.maps.FusionTablesLayer({
      query: {
        select: "col2>>1",
        from: "1GbF1tKsgQshl1kxOLNDGgw52Wv8bWYL6njpcKVI"
      },
      styleId: 2,
      map: map,
      suppressInfoWindows: true
    });

    var ib = new InfoBox();

    google.maps.event.addListener(layer, 'click', function(e) {

      var childpoverty = e.row['Child poverty rate'].value;
      if (childpoverty > 22) {
        pcolour = '<p style="color: red; font-weight: bold;">';
      } 
      else if (childpoverty > 13) {
        pcolour = '<p style="color: orange; font-weight: bold;">';
      } 
      else {
        pcolour = '<p style="color: green; font-weight: bold;">';
      };

      var sponsored = e.row['Sponsorship'].value;     
      if (sponsored == 1) {
        iboxText = [
        '<div class="tabs">',
            '<ul>',
                '<li><a href="#tab-1"><span>Sponsor</span></a></li>',
                '<li><a href="#tab-2"><span>Information</span></a></li>',
            '</ul>',
            '<div id="tab-1">',
                '<p style="font-weight: bold;">' + e.row['Local authority'].value + '</p>',
                '<img src="' + e.row['Logo'].value + '" width="100"></img>',
            '</div>',
            '<div id="tab-2">',
                '<p style="font-weight: bold;">' + e.row['Local authority'].value + '</p>',
                '<p>' + e.row['Political control'].value + '</p>',
                pcolour + e.row['Child poverty rate'].value + '</p>',
                '<p>' + e.row['Unemployment rate'].value + '</p>',
            '</div>',
        '</div>'
      ].join('')}
      else {
        iboxText = [
          '<div class="tabs">',
            '<p style="font-weight: bold;">' + e.row['Local authority'].value + '</p>',
            '<p>' + e.row['Political control'].value + '</p>',
            pcolour + e.row['Child poverty rate'].value + '</p>',
            '<p>' + e.row['Unemployment rate'].value + '</p>',
          '</div>'
       ].join('')};

      var myOptions = {
            disableAutoPan: false
            ,maxWidth: 0
            ,pixelOffset: new google.maps.Size(-140, 0)
            ,zIndex: null
            ,boxStyle: { 
              background: "white"
              ,opacity: 0.75
              ,width: "280px"
              ,padding: "5px"
             }
            ,closeBoxMargin: "10px 2px 2px 2px"
            ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
            ,infoBoxClearance: new google.maps.Size(1, 1)
            ,isHidden: false
            ,pane: "floatPane"
            ,enableEventPropagation: false
      };

      ib.setOptions(myOptions);
      ib.setContent(iboxText);
      ib.setPosition(e.latLng);
      ib.open(map);
      $(".tabs").tabs({ selected: 0 })

    });

  }      

</script>

就像我说的，几乎完全相同，除了第二个，没有标签。

我被卡住了，任何帮助都会如此受到赞赏。

Answer 1

当信息框的$.tabs() - 事件触发时，

调用domready（此时信息框已附加到DOM，当您之前调用$.tabs()信息框内容不能由jQuery发现）：

  google.maps.event.addListener(ib,'domready',function(){
    $(".tabs").tabs({ selected: 0 })
  });

Answer 2

这对我有用：

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

Google Map InfoBox中的jQuery UI选项卡

2 个答案: