融合表查询：从外部链接放大标记

Question

我正在尝试在谷歌融合地图中创建从文本到标记的链接。更准确地说，我希望地图刷新并放大所选位置。

一张图会更容易理解： http://projeteurope.free.fr/ 例如，如果您点击页面右侧的“Akrame”，地图应该会放大该点（融合表中已经存在，并且是 19 Rue Lauriston, 75016 Paris）

我查看了不同的主题和网站，但我不明白该怎么做（我是 javascript 的初学者） Fusion Table + Google Maps 或http://alamatku.com/cari?query=UPS&area=jakarta 或Google Fusion Tables With Maps - Link Table field to Map Info Window

我只想让地图放大特定市场，而不是创建一个只有标记的新图层。

如果您有任何线索，非常感谢！ 罗宾

Answer 1

您可以使用GViz (the google visualization library)查询融合表并在标记处放大地图。

代码：

function changeQuery(term) {
  layer.setOptions({query:{select:'Latitude', /* was 'Latitude,Longitude', used to work... */
                           from:FT_TableID,
                           where:"Nom contains "+term
                           }

 });

  // zoom and center map on query results
  //set the query using the parameter
  var queryText = encodeURIComponent("SELECT 'Latitude', 'Longitude' FROM "+FT_TableID+" WHERE 'Nom' contains '"+term+"'");
  var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq='  + queryText);

  //set the callback function
  query.send(zoomTo);
}

function zoomTo(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();

  var bounds = new google.maps.LatLngBounds();
  for(i = 0; i < numRows; i++) {
      var point = new google.maps.LatLng(
          parseFloat(response.getDataTable().getValue(i, 0)),
          parseFloat(response.getDataTable().getValue(i, 1)));
      bounds.extend(point);
  }
  // zoom to the bounds, if you have only one result, 
  // you may want to do a map.setCenter; map.setZoom to specify the behavior
  map.fitBounds(bounds);
}

example/proof of concept