0

我在将 jQuery UI 选项卡菜单放入 Google Map InfoWindow 时遇到了一些问题。

信息窗口是从分层在底图上的融合表创建的。我有一个使用 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>

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

我被困住了，任何帮助都将不胜感激。

4

2 回答 2

0

$.tabs()当 infobox 的-event 触发时调用（此时domreadyinfobox 已附加到 DOM，当您之前调用时$.tabs()，jQuery 无法找到 infobox-content）：

  google.maps.event.addListener(ib,'domready',function(){
    $(".tabs").tabs({ selected: 0 })
  });
于 2013-09-06T23:45:59.153 回答
0

这对我有用：

google.maps.event.addListener(infoWindow, 'domready', function() {
    jQuery("#tabs").tabs();
});
于 2014-12-19T17:36:51.143 回答