Question

我想在世界地图上显示每个国家/地区的一些变量。使用Google Fusion Tables，我设置了地图。现在我想在变量/图层（Var_A和Var_B）之间切换，我想通过下拉菜单进行可视化。我遵循了Guardian在this article中使用的代码。在这个例子中，FusionTable本身的信息窗口的格式似乎只是出现，但对我来说并不适用。

这是融合表：https://www.google.com/fusiontables/embedviz?viz=GVIZ&t=TABLE&q=select+col0%2C+col1%2C+col2%2C+col3%2C+col4%2C+col5%2C+col6%2C+col7+from+19I14XgRDOk7697iWA8XSukbYBBelNRymFOqjw_ru&containerId=googft-gviz-canvas

点击相应的国家/地区我想显示一个信息窗口，其中显示了一个图表（例如条形图），显示了Layer＆＃39; Var_A＆＃39;时的值Var_A和Var_A1。当Layer＆＃39; Var_B＆＃39;时，选择Var_B和Var_B1。被选中。

我尝试了Add a google chart to a infowindow using google maps api ....

中的代码示例

   function drawChart(marker) {

        var node        = document.createElement('div'),
            infoWindow  = new google.maps.InfoWindow(),
            chart       = new google.visualization.PieChart(node);

            chart.draw(data, options);
            infoWindow.setContent(node);
            infoWindow.open(marker.getMap(),marker);
      }

...但即使是静态的谷歌图表也不适合我。

所以我真的有三个问题：

1）在信息窗口中显示任何图表

2）使用来自相应数据行（国家/地区）的数据显示图表

3）使用来自相应数据行（国家/地区）的数据并根据所选图层显示图表

我尝试了几天现在有许多不成功的方法而且我被卡住 - 准备离开谷歌地图如果我不能让它工作。这是至少显示地图的最后一件事的小提琴 - 我不得不再次删除所有事件监听器......

小提琴：http://jsfiddle.net/sytpp/ovfauhwb/

任何帮助都很有帮助!!

Answer 1

观察FusionTablesLayer的点击事件，您将获得特定行的值：

google.maps.event.addListener(layer,'click',function(e){
    //which values need to be drawn in the chart, A or B ?
    var prefix=document.getElementById('selector').value,

    //collect the data
    row={title:e.row.Country.value,rows:[]};
    //Var_A or Var_B
    row.rows.push([prefix,Number(e.row[prefix].value)]);
    //Var_A or Var_B1
    row.rows.push([prefix+'1',Number(e.row[prefix+'1'].value)]);
    //call drawChart by passing the collected data and clicked position as arguments 
    drawChart(row,e.latLng);
});

现在使用数据（注意：您最初可能将infoWindow的内容设置为空div元素，每次都不需要创建新节点）

function drawChart(row,position) {

    // Create the data table.
    var data = new google.visualization.DataTable();
    //set the scheme
    data.addColumn('string', 'label');
    data.addColumn('number', 'amount');
    //add the data
    data.addRows(row.rows);

    // Set chart options
    var options = {'title':row.title,
                   'width':300,
                   'height':200,
                   legend:'none'};

    //assuming the infoWindow already has the content set to a DOMNode, e.g. a div
    var chart       = new google.visualization.BarChart(infoWindow.getContent());

    chart.draw(data, options);

    infoWindow.setOptions({map:map,position:position});

}

注意：您必须将FusionTablesLayer的suppressInfoWindows - 选项设置为true，否则将打开2个InfoWindows，内置和自定义图表将在被画出来。

演示：http://jsfiddle.net/doktormolle/o1fyarnf/

Google地图：InfoWindow，包含来自融合表的图表，具体取决于所选图层

1 个答案: