单击地图中的标记时，我已经在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'
}
});
}
分页符号显示在表格中，但是每单击一次，分页均不起作用。
我不知道这是一个错误还是这是maps api v3支持的唯一功能。
更新 ：
<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>
目前尚不清楚您如何组合地图和表格，对我而言，将它们组合起来没有问题。
我看到的唯一问题是您在第一个代码段中使用了pageSize : 4，但是当您尝试使用与第二个代码段中所示的相同数据进行操作时，分页按钮没有任何作用（表中只有4行）
但是，有一个可行的示例（添加了一些基于标记位置的过滤，也许这是您的最终目标）
google.load('visualization', '1', {packages: ['table']});
google.load('maps', '3', {callback: function(){
var cssClass = {rowNumberCell: 'rowNumberCellClass'},
places= {
Stockholm: new google.maps.LatLng( 59.329, 18.068),
India: new google.maps.LatLng( 20.593, 78.962),
Dubai: new google.maps.LatLng( 25.204, 55.270),
Australia: new google.maps.LatLng(-25.274, 133.775)
};
function drawVisualization(node,place) {
//initialize data and chart
if(!node.chart){
node.chart = {
table: new google.visualization.Table(node),
data: new google.visualization.DataTable(),
options:{
allowHtml: true,
showRowNumber: true,
cssClassNames: cssClass,
page: 'enable',
pageSize: 1,
pagingSymbols: {
prev: 'Previous',
next: 'Next'
}
}
};
node.chart.data.addColumn('string', 'Name');
node.chart.data.addColumn('string', 'Place');
node.chart.data.addRows([
['Bart' ,'Stockholm'],
['Marge' ,'Stockholm'],
['Homer' ,'Stockholm'],
['John-Boy' ,'Dubai'],
['Jim-Bob' ,'Dubai'],
['Jason' ,'Dubai'],
['Charlie' ,'India'],
['Alan' ,'India'],
['Rose' ,'India'],
['Sheldon' ,'Australia'],
['Penny' ,'Australia'],
['Howard' ,'Australia']
]);
node.chart.view = new google.visualization.DataView(node.chart.data);
}
//draw table
if(place){//filter the rows when place-argument has been provided
node.chart.view.setRows(node.chart.data.getFilteredRows([{column: 1,
value: place}]));
node.chart.table.draw(node.chart.view, node.chart.options);
}
else{
node.chart.table.draw(node.chart.data, node.chart.options);
}
}
var map = new google.maps.Map(document.getElementById('map-canvas'),
{zoom:1,center:{lat:0,lng:0}})
//the node where the table will be drawn
table = document.createElement('div'),
//infowindow
infowin = new google.maps.InfoWindow({content:table});
table.setAttribute('id','tableContainer');
google.maps.event.addListener(infowin,'domready',function(){
drawVisualization(this.getContent(),this.get('placename'));
});
//create some markers
for(var k in places){
(function(place,latlng){
var marker = new google.maps.Marker({map:map,
position:latlng,
placename:place});
google.maps.event.addListener(marker,'click',function(){
infowin.set('placename',this.get('placename'));
infowin.open(map,marker);
});
}(k,places[k]));
}
}});html,
body,
#map-canvas {
height: 100%;
margin: 0;
padding: 0;
}<div id="map-canvas"></div>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句