Google中的InfoBox用户界面

Question

我在Google中放置一个jQuery UI选项卡菜单时遇到了一些问题。

infowindows是从基础地图上分层的融合表中创建的。我有一个使用Maps infowindow的示例，它工作得非常完美(但是仍然需要完成样式设计，而且数据还不完整)

然而，infowindow有点限制，我需要更多的灵活性，所以我转而使用InfoBox.js。谢天谢地，它非常适合我，我所要做的就是改变几个选择器，这样就可以匹配起来了。这些框可以很好地工作，但是jquery选项卡现在根本不能工作。应该在HTML中创建的类属性不是。

下面是使用infowindow的原始脚本：

<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

当信息框的domready-event触发时调用$.tabs() (此时该信息框已附加到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();
});