融合表查询：从外部链接放大标记 [英] Fusion table query : zoom on a marker from an external link

问题描述

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

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

我看过不同的主题和网站，但我不明白如何做到这一点（我是一个JavaScript初学者）
Fusion Table + Google地图
或 http：// alamatku.com/cari?query=UPS&area=jakarta
或 Google地图 - Google地图 - 油墨表字段到地图信息窗口

我只想让地图在特定的市场上放大，而不是仅用标记创建新图层。 / p>

非常感谢您有任何线索！
Robin

解决方案

您可以使用 GViz（google可视化库）查询融合表并将地图放大到标记上。

CODE：

$ p $ function changeQuery（term）{
layer.setOptions（{query：{select： 'Latitude'，/ *是'Latitude，Longitude'，用于... * /
来自：FT_TableID，
其中：Nom包含+ term
}

}）;

//查询结果的缩放和中心映射
//使用参数
设置查询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）;

//设置回调函数
query.send（zoomTo）;


函数zoomTo（响应）{
if（！response）{
alert（'no response'）;
return;

if（response.isError（））{
alert（'Error in query：'+ response.getMessage（）+''+ response.getDetailedMessage（））;
return;
}
FTresponse =回应;
//有关响应对象的更多信息，请参阅文档
//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）;
}
//放大界限，如果你只有一个结果，
//你可能想要做一个map.setCenter; map.setZoom指定行为
map.fitBounds（bounds）;
}


示例/概念证明

I'm trying to create links from a text to a marker in a google fusion map. More precisely, I want the map to refresh and zoom on the location selected.

A picture will be easier to understand: http://projeteurope.free.fr/ For example, if you click on "Akrame" on the right side of the page, the map should zoom on the point (which already exist in the fusion table, and is 19 Rue Lauriston, 75016 Paris)

I've look at different topics and websites, but I don't understand how to do that (I'm a total beginner in javascript) Fusion Table + Google Maps or http://alamatku.com/cari?query=UPS&area=jakarta or Google Fusion Tables With Maps - Link Table field to Map Info Window

I just want the map to zoom on a specific market, not to create a new layer with only the marker.

Many thanks if you have any clues! Robin

解决方案

You can use GViz (the google visualization library) to query the fusion table and zoom the map in on the marker.

CODE:

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

这篇关于融合表查询：从外部链接放大标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！