使用 google API 的数据表在信息窗口内容分页中出现问题

Question

我是 google 地图的新手。我需要帮助在单击标记时为信息窗口内的 table 内容实现分页。

这是我的代码：

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=places"></script>
<script type="text/javascript">
      google.load('visualization', '1', {'packages': ['table']});
    var map;
    var myCenter=new google.maps.LatLng(51.508742,-0.120850);
    var mapInfos = [];
    var infoWindowView = new google.maps.InfoWindow;
    function initialize()
    {
        map = new google.maps.Map(document.getElementById('mapCanvas'), {
                zoom:5,
                center: new google.maps.LatLng(49.072086992455475,-5.05078125),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

        var marker=new google.maps.Marker({
                        position: myCenter
                    });
        marker.setMap(map);

        function mapInfoTable(container)
        {
           this.tableContainer = container;
            var me = this;
            var cssClass = {rowNumberCell: 'rowNumberCellClass'};

            this.dT = new google.visualization.DataTable();

            this.dT.addColumn("string", "Name");   
            this.dT.addColumn("string", "City");                 


            this.populateTable = function()
            {
              this.dT.addRows([
                            ['A1' ,'C1'],
                            ['A2' ,'C2'],
                            ['A3' ,'C3'],
                            ['A4' ,'C4'],
                            ['A5' ,'C5'],
                            ['A6' ,'C6'],
                            ['A7' ,'C7'],
                            ['A8' ,'C8']
                          ]);
               this.draw();
            }
            this.table = new google.visualization.Table(document.getElementById(this.tableContainer));

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

        google.maps.event.addListener(marker, 'click', function(e) {
                    var InfoTab = new mapInfoTable('TableInfo');
                    InfoTab.populateTable(mapInfos);
                    var content = document.getElementById("TableInfo").innerHTML;
                    infoWindowView.setContent(content);
                    infoWindowView.open(map, this);
                });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

 </head>
 <body>
<div id="mapCanvas" style="width:800px;height:500px"></div>
<div id="TableInfo" style="position:fixed;"></div>
</body>
</html>

请告诉我问题出在哪里。

Answer 1

在填充 table 之前，您需要等待信息窗口上的 'domready' 事件。

proof of concept fiddle

代码片段：

google.load('visualization', '1', {
  'packages': ['table']
});
var map;
var myCenter = new google.maps.LatLng(51.508742, -0.120850);
var mapInfos = [];
var infoWindowView = new google.maps.InfoWindow;

function initialize() {
  map = new google.maps.Map(document.getElementById('mapCanvas'), {
    zoom: 5,
    center: new google.maps.LatLng(49.072086992455475, -5.05078125),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var marker = new google.maps.Marker({
    position: myCenter
  });
  marker.setMap(map);

  function mapInfoTable(container) {
    this.tableContainer = container;
    var me = this;
    var cssClass = {
      rowNumberCell: 'rowNumberCellClass'
    };

    this.dT = new google.visualization.DataTable();

    this.dT.addColumn("string", "Name");
    this.dT.addColumn("string", "City");


    this.populateTable = function() {
      this.dT.addRows([
        ['A1', 'C1'],
        ['A2', 'C2'],
        ['A3', 'C3'],
        ['A4', 'C4'],
        ['A5', 'C5'],
        ['A6', 'C6'],
        ['A7', 'C7'],
        ['A8', 'C8']
      ]);
      this.draw();
    }
    this.table = new google.visualization.Table(document.getElementById(this.tableContainer));

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

  google.maps.event.addListener(marker, 'click', function(e) {
    var dTableInfo = document.createElement("div");
    dTableInfo.id = "dTableInfo";
    google.maps.event.addListener(infoWindowView, 'domready', function() {

      var InfoTab = new mapInfoTable('dTableInfo');
      InfoTab.populateTable(mapInfos);
    });
    infoWindowView.setContent(dTableInfo);
    infoWindowView.open(map, this);
  });
}

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

html,
body,
#mapCanvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://www.google.com/jsapi"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="mapCanvas"></div>

使用 google API 的数据表在信息窗口内容分页中出现问题

Issue in infowindow content pagination using google API's datatable

google-maps-api-3

pagination

infowindow