将Google图表添加到FusionTableLayer信息窗口

debugcn 发表于 Dev

皮特克

我正在尝试在InfoWindow（融合表图层）中显示图表（Google Chart API），但是问题出在容器“未捕获的错误：容器为null或未定义。” 每当我尝试将div包含在InfoWindow中时。

我正在尝试根据此解决方案解决问题，但不适用于融合表使用Google Maps API将Google图表添加到信息窗口中

请帮忙

<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
    function drawVisualization() {
      var queryText = encodeURIComponent("SELECT Year, Austria, Bulgaria, Denmark, Greece FROM 641716");
      google.visualization.drawChart({
        "containerId": 'visualization_div',
        "dataSourceUrl": 'https://www.google.com/fusiontables/gvizdata?tq=',
        "query":"SELECT Year, Austria, Bulgaria, Denmark, Greece FROM 641716",
        "refreshInterval": 5,
        "chartType": "PieChart",
        "options": {
          "title":"Yearly Coffee Consumption by Country",
          "vAxis": {"title": "Year"},
          "hAxis": {"title": "Cups"}
        }
      });
    }
      function initialize() {
        var map = new google.maps.Map(document.getElementById('map-canvas'), {
          center: new google.maps.LatLng(29.296435107347698, -29.54822280000008),
          zoom: 2,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var layer = new google.maps.FusionTablesLayer({
          query: {
            select: 'col0',
            from: '1PoUAVtdJKOKnJT_ZYkoM7yDpGw-wNJMHXakPeC0'
          },
          map: map
        });
        google.maps.event.addListener(layer, 'click', function(e) {
        drawVisualization(this);
          e.infoWindowHtml += "<div id='visualization_div'></div>";{
          }
        });
      }

      google.maps.event.addDomListener(window, 'load', initialize);

    </script>

PS。

还有一件事！可以显示一行数据中的图表。在我的示例中，对于一个被点击的国家？

莫勒博士

这有点困难。

FTLayer的信息窗口不会立即打开，因为该信息窗口的数据将被异步请求。

当您立即调用drawVisualization时，不能保证infowindow-content在DOM中已经可用，但是#visualization_div将无法使用。

问题：FTLayer的信息窗口没有任何准备就绪事件，您永远不会知道信息窗口何时准备就绪。

另一个问题：图表也将异步绘制，结果将是信息窗口的外观不理想（图表将绘制在信息窗口下方，而不是内部）

可能的解决方案（可能还有其他解决方案）：改用自定义信息窗口：

<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});

  //pass the infowindow as argument, we need it later
function drawVisualization(infowindow) {
  var queryText = encodeURIComponent("SELECT Year, Austria, Bulgaria, \
                                      Denmark, Greece FROM 641716");

    /*note:      we don't need the ContainerId here, 
                 we use the node-reference with draw
     *also note: we use ChartWrapper here, because we need 
                 the ready-event of the chart to redraw the infowindow
    */
  var chart=new google.visualization.ChartWrapper({
    "dataSourceUrl": 'https://www.google.com/fusiontables/gvizdata?tq=',
    "query":"SELECT Year, Austria, Bulgaria, Denmark, Greece FROM 641716",
    "refreshInterval": 5,
    "chartType": "PieChart",
    "options": {
      "title":"Yearly Coffee Consumption by Country",
      "vAxis": {"title": "Year"},
      "hAxis": {"title": "Cups"}
    }
  });


  var ready=google.visualization.events.addListener(chart, 'ready', function(){
      //re-assign the map-property to redraw the 
      //infowindow when the chart has been drawn
    infowindow.setMap(infowindow.getMap());
      //remove the ready-listener
    google.visualization.events.removeListener(ready);
   });

    //draw the chart
  chart.draw(infowindow.getContent().lastChild);

}

function initialize() {
    map = new google.maps.Map(document.getElementById('map-canvas'), {
      center: new google.maps.LatLng(29.296435107347698, -29.54822280000008),
      zoom: 2,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var layer = new google.maps.FusionTablesLayer({
      query: {
        select: 'col0',
        from: '1PoUAVtdJKOKnJT_ZYkoM7yDpGw-wNJMHXakPeC0'
      },
      map: map,
        //don't use the infowindows of the FTLayer
      suppressInfoWindows:true
    });
      //a custom infowindow
    infowindow=new google.maps.InfoWindow();


    google.maps.event.addListener(layer, 'click', function(e) {
      //call drawVisualization when the infowindow is ready
      google.maps.event.addListenerOnce(infowindow,'domready',function(){
        drawVisualization(infowindow);
      });
        //create the content for the infowindow
      var node=document.createElement('div');
      node.innerHTML=e.infoWindowHtml;
        //create the node where the chart will be drawn
      node.appendChild(document.createElement('div'));
        //open the infowindow
      infowindow.setOptions({position:e.latLng,content:node,map:map});
     });
  }

  google.maps.event.addDomListener(window, 'load', initialize);

</script>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。