Question

对于我的生活，我无法在侧边栏链接点击上打开此地图以打开信息窗口：http://web.redding.com/static/redd/asphalt/prod/xmas-lights-2014-complex.html

这里是融合表：https://www.google.com/fusiontables/DataSource?docid=1WrvKdTypAmZozAIVeOw4vBX2g1hPInyVyuqn8GUM

看起来像这样（CSV）：

Location,Description,Photo,Winner,Name
"1101 Twin View Boulevard, Redding CA",Redding's finest media organization with decades of experience & class.,http://mediaassets.redding.com/photo/2014/03/15/youthcamp17b-01_3471502_ver1.0.jpg,,The Record Searchlight
"1500 Court Street, Redding CA",Shasta Courthouse,,,
"777 Cypress Avenue, Redding CA",City Hall,,,

我想要做的就是点击边栏中的链接，并在地图上打开相关的信息窗口。

我是javascript的新手，所以如果有一些显而易见的东西，我不会感到惊讶。

链接页面中的代码：

function  createSidebar() {
  //set the query using the parameter
  var query = new google.visualization.Query(queryText);
  var queryText = encodeURIComponent("SELECT 'Name','Description' FROM 1uQLxgNdNR_etBFP8O_0YNDA38PqyZB3NidIJfsgX");
  var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq='  + queryText);
  //set the callback function
  query.send(getData);
}

function myFTclick(row) {
   var Name = FTresponse.getDataTable().getValue(row,0);
   var Description = FTresponse.getDataTable().getValue(row,1);
   var Location =  FTresponse.getDataTable().getValue(row,2);
   var Photo =  FTresponse.getDataTable().getValue(row,5);
   var Winner =  FTresponse.getDataTable().getValue(row,7);
   var position = new google.maps.LatLng(lat, lng);
   // Set up and create the infowindow
     if (!infoWindow) infoWindow = new google.maps.InfoWindow({});
     var content = '<div class="FT_infowindow">' + name;
     if (Description)  content += '<br>'+Description;
     if (Location)    content += '<br>'+Location;
     if (Photo) content += '<br>'+Photo;
         if (extraContent) content += "<br>["+extraContent+"]";
     content += '<br>'+'<a href="javascript:map.setCenter(new google.maps.LatLng'+position+');map.setZoom(map.getZoom()+1);">zoom in</a>';
     content += '</div>';
     infoWindow.setOptions({
       content: content,
       pixelOffset: null,
       position: position
     });
    // Infowindow-opening event handler
    infoWindow.open(map);
}
var FTresponse = null;
//define callback function, this is called when the results are returned
function getData(response) {
if (!response) {
  alert('no response');
  return;
}
if (response.isError()) {
  alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
  return;
} 
  FTresponse = response;
  //for more information on the response object, see the documentation
  //http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse
  numRows = response.getDataTable().getNumberOfRows();
  numCols = response.getDataTable().getNumberOfColumns();

  //concatenate the results into a string, you can build a table here
  fusiontabledata = "<table><tr>";
  fusiontabledata += "<th>" + response.getDataTable().getColumnLabel(1) + "</th>";
  fusiontabledata += "</tr><tr>";

  for(i = 0; i < numRows; i++) {
      fusiontabledata += "<td><a href='javascript:myFTclick("+i+")'>"+response.getDataTable().getValue(i, 1) + "</a></td>";
    fusiontabledata += "</tr><tr>";
  }
  fusiontabledata += "</table>"  
  //display the results on the page
  document.getElementById('sidebar').innerHTML = fusiontabledata;
}

Answer 1

您的代码中有javascript错误，请查看javascript控制台：Uncaught Error: Invalid column index 2. Should be an integer in the range [0-1].

您的查询仅包含表格中的两列：

var queryText = encodeURIComponent("SELECT 'Name','Description' FROM 1uQLxgNdNR_etBFP8O_0YNDA38PqyZB3NidIJfsgX");

这意味着您无法获得超过0和1的任何列，因此这不起作用：

function myFTclick(row) {
   var Name = FTresponse.getDataTable().getValue(row,0);
   var Description = FTresponse.getDataTable().getValue(row,1);
   var Location =  FTresponse.getDataTable().getValue(row,2);
   var Photo =  FTresponse.getDataTable().getValue(row,5);
   var Winner =  FTresponse.getDataTable().getValue(row,7);

您需要在查询中包含这些内容：

 var queryText = encodeURIComponent("SELECT 'Name','Description','Location','Photo','Winner' FROM 1uQLxgNdNR_etBFP8O_0YNDA38PqyZB3NidIJfsgX");

然后按顺序访问它们：

function myFTclick(row) {
   var Name = FTresponse.getDataTable().getValue(row,0);
   var Description = FTresponse.getDataTable().getValue(row,1);
   var Location =  FTresponse.getDataTable().getValue(row,2);
   var Photo =  FTresponse.getDataTable().getValue(row,3);
   var Winner =  FTresponse.getDataTable().getValue(row,4);

在Google Fusion Table上打开带有侧边栏的infowindow

1 个答案: