Google maps api 3 google visualization API数据表的分页不起作用_Google Maps Api 3_Data Visualization

Google maps api 3 google visualization API数据表的分页不起作用

google-maps-api-3

Google maps api 3 google visualization API数据表的分页不起作用,google-maps-api-3,data-visualization,Google Maps Api 3,Data Visualization,我已经在infowindow的内容中实现了一个google可视化表，同时单击地图中的一个标记但是，现在我尝试使用以下代码为infowindow中包含的表添加分页 this.draw = function() { this.table.draw(this.dT, { allowHtml: true, showRowNumber: true, cssClassNames: cssClass, page : 'enable'

我已经在infowindow的内容中实现了一个google可视化表，同时单击地图中的一个标记

但是，现在我尝试使用以下代码为infowindow中包含的表添加分页

this.draw = function() {
    this.table.draw(this.dT, {
        allowHtml: true, 
        showRowNumber: true, 
        cssClassNames: cssClass,
        page : 'enable',
        pageSize : 4,
        pagingSymbols: {
            prev: 'Previous',
            next: 'Next'
        }
    });
}

分页符号出现在表中，但每当单击时，分页都不起作用

我不知道这是一个bug，还是这是MapsAPIv3支持的唯一功能

更新：

<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['table']});
</script>
<script type="text/javascript">
var cssClass = {rowNumberCell: 'rowNumberCellClass'};

function drawVisualization() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('string', 'Place');
  data.addRows(4);
  data.setCell(0, 0, 'John');
  data.setCell(1, 0, 'Sam');
  data.setCell(2, 0, 'Andreson');
  data.setCell(3, 0, 'Cody');

  data.setCell(0, 1, 'Stockholm');
  data.setCell(1, 1, 'Dubai');   
  data.setCell(2, 1, 'India');
  data.setCell(3, 1, 'Australia');

  visualization = new google.visualization.Table(document.getElementById('tableContainer'));

  visualization.draw(data, {
    allowHtml: true, 
    showRowNumber: true, 
    cssClassNames: cssClass,
    page : 'enable',
    pageSize : 2,
    pagingSymbols: {
    prev: 'Previous',
    next: 'Next'
},

});

 }  
 google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<div id="tableContainer"></div>
</body>
</html>


load（'visualization'，'1'，{packages:['table']}）；
var cssClass={rowNumberCell:'rowNumberCellClass'}；
函数drawVisualization（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Name'）；
data.addColumn（'string'，'Place'）；
数据。添加行（4）；
setCell（0,0，'John'）；
setCell（1,0，'Sam'）；
setCell（2,0，'anderson'）；
数据集单元（3,0，'Cody'）；
setCell（0,1，'Stockholm'）；
数据集单元（1，1，'迪拜'）；
数据：setCell（2，1，'印度'）；
数据：setCell（3，1，'澳大利亚'）；
可视化=新的google.visualization.Table（document.getElementById（'tableContainer'）；
可视化。绘制（数据、{
allowHtml:是的，
showRowNumber:true，
cssClassNames:cssClass，
页面：“启用”，
页面大小：2，
分页符号：{
上一篇：'上一篇'，
下一个：“下一个”
},
});
}  
setOnLoadCallback（drawVisualization）；

不清楚您是如何组合地图和图表的，对我来说，组合它们时没有问题

我看到的唯一问题是，您在第一个代码段中使用了pageSize:4，但当您使用第二个代码段中显示的相同数据进行尝试时，页面按钮没有任何操作（表中只有4行）

然而，一个工作示例（添加了一些基于标记位置的过滤，这可能是您的最终目标）

google.load（'visualization'，'1'，{packages:['table']}）；
load（'maps'，'3'，{callback:function（）{
var cssClass={rowNumberCell:'rowNumberCellClass'}，
名额={
斯德哥尔摩：新google.maps.LatLng（59.329,18.068），
印度：新google.maps.LatLng（20.593,78.962），
迪拜：新google.maps.LatLng（25.204,55.270），
澳大利亚：新google.maps.LatLng（-25.274133.775）
};
功能可视化（节点、位置）{
//初始化数据和图表
如果（！node.chart）{
node.chart={
表：新的google.visualization.table（节点），
数据：新的google.visualization.DataTable（），
选项：{
allowHtml:是的，
showRowNumber:true，
cssClassNames:cssClass，
页面：“启用”，
页面大小：1，
分页符号：{
上一篇：'上一篇'，
下一个：“下一个”
}
}
};
node.chart.data.addColumn（'string'，'Name'）；
node.chart.data.addColumn（'string'，'Place'）；
node.chart.data.addRows([
[‘巴特’，‘斯德哥尔摩’]，
['Marge'，'Stockholm']，
[‘荷马’、‘斯德哥尔摩’]，
[“约翰男孩”，“迪拜”]，
['Jim-Bob'，'Dubai']，
['Jason'，'Dubai']，
[“查理”，“印度”]，
[“艾伦”，“印度”]，
[‘玫瑰’、‘印度’]，
['Sheldon'，'Australia']，
[‘便士’、‘澳大利亚’]，
[“霍华德”，“澳大利亚”]
]);
node.chart.view=新的google.visualization.DataView（node.chart.data）；
}
//画图台
if（place）{//提供place参数后过滤行
node.chart.view.setRows（node.chart.data.getFilteredRows（[{列：1，
值：place}]）；
node.chart.table.draw（node.chart.view，node.chart.options）；
}
否则{
node.chart.table.draw（node.chart.data、node.chart.options）；
}
}    
var map=new google.maps.map（document.getElementById（'map-canvas'），
{缩放：1，中心：{lat:0，lng:0}）
//将在其中绘制表的节点
table=document.createElement（'div'），
//信息窗口
infowin=newgoogle.maps.InfoWindow（{content:table}）；
setAttribute（'id'，'tableContainer'）；
google.maps.event.addListener（infowin，'domready'，function（）{
drawVisualization（this.getContent（）、this.get（'placename'））；
});
//创建一些标记
用于（变量k在位置）{
（功能（地点、板条）{
var marker=new google.maps.marker（{map:map，
位置：latlng，
地名:place}）；
google.maps.event.addListener（标记，'click'，函数（）{
infowin.set（'placename'，this.get（'placename'）；
打开（地图、标记）；
});
}（k，地点[k]）；
}
}});
html，
身体，
#地图画布{
身高：100%；
保证金：0；
填充：0；
}