지도에서 마커를 클릭하는 동안 이미 정보창의 콘텐츠에 Google 시각화 테이블을 구현했습니다.
하지만 이제 다음 코드를 사용하여 정보창에 포함 된 테이블에 페이지 매김을 추가하려고합니다.
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] 삭제
몇 마디 만하겠습니다