Question

所以我是一个带有long和lat值的kml文件。我正在尝试使用Google API在下面创建地图和表格，我设法同时创建了两者。下一步是使地图和表格相互交互，例如，当我单击相应的行时选择了标记，反之亦然。我在这里找到了类似的示例：https://developers.google.com/chart/interactive/docs/examples。

但是，我创建地图和表格的方式与在那里看到的方式有很大不同。我跟随Google API网站创建这些项目。我的代码有一个问题，就是所提供的代码将地图，表格和图表全部显示在一起，并且该图表已链接到Google工作表。我试图让函数初始化，但是页面变成空白。

我尝试使用下面提供的代码来运行我的工作，很明显地更改了名称。：

    var geoView = new google.visualization.DataView(geoData);
    geoView.setColumns([0, 1]);

    var table =
        new google.visualization.Table(document.getElementById('table_div'));
    table.draw(geoData, {showRowNumber: false, width: '100%', height: '100%'});

    var map =
        new google.visualization.Map(document.getElementById('map_div'));
    map.draw(geoView, {showTip: true});

    // Set a 'select' event listener for the table.
    // When the table is selected, we set the selection on the map.
    google.visualization.events.addListener(table, 'select',
        function() {
          map.setSelection(table.getSelection());
        });

    // Set a 'select' event listener for the map.
    // When the map is selected, we set the selection on the table.
    google.visualization.events.addListener(map, 'select',
        function() {
          table.setSelection(map.getSelection());
        });
  }

--> here is my initial setup 
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      center: {lat:42.3965006 , lng: -83.2464787}
    });
--> here is my points used for markers    
var locations  = [['Name', lat,long],];
--> here is my info window popup
infowindowContent =[
['<div class ="info_content">' +'<h3>name</h3>' + '<p> info I would like to show</p>' + '<p>info I would like to show</p>'+'<p>info I would like to show</p>]];
var infowindow = new google.maps.InfoWindow(), marker,i;
var marker, i;

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  }
  );
  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(infowindowContent[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}
  }
</script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {'packages':['table']});
  google.charts.setOnLoadCallback(drawTable);
--> here is my table
  function drawTable() {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Lat');
    data.addColumn('number', 'Long');
    data.addColumn('string', 'ProgramName');
    data.addColumn('string', 'Service Restrictions');
    data.addRows([
      [lat, long, programname, service restriction]
      ]);
    //showing all values on the table on the map
    var table = new google.visualization.Table(document.getElementById('table_div'));

    table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
  }


</script>

我期望与Google API提供的示例非常相似。我尝试对表格和地图都使用google.visualization，但没有任何变化。抱歉，我可能对我的代码没有很好地解释。任何反馈将不胜感激。

如何获取表格和地图以进行交互

0 个答案: