【发布时间】：2015-03-06 03:09:11
【问题描述】：
使用 Maps API 发布 Stack Overflow 的新手/新手 - 所以我没有足够的“声誉”来发布超过 2 个链接
使用访问 Fusion Table（公共设置）的 Google Maps API -
https://www.google.com/fusiontables/DataSource?docid=13H4lBUCA1z_mdCJEyCalF0AKgIDtr_C7lIZzQ6D6
希望它放大到从侧栏菜单生成的图层的查询结果。已经看到了各种示例/以它们为起点进行了实验（查看了此处的各种帖子）。在我修改/调整的所有情况/不同示例中，我可以让图层出现并响应各种查询，但不能放大（甚至尝试修改表格以包含像示例这样的列作为测试）
当前示例（此处在多个线程中提到 - 谢谢 geocodezip！）我正在使用的是
http://www.geocodezip.com/www_vciregionmap_comC.html
不断收到解析错误 - “查询错误：无法解析查询” - 很确定它在我如何设置查询的语法中......
在 Google Drive (Mac/Chrome) 中使用 JEditey - 当我复制它时，示例在此基础上运行良好
Javascript 文件（单独）：
var FT_TableID = "13H4lBUCA1z_mdCJEyCalF0AKgIDtr_C7lIZzQ6D6"; // 1288005; // 1200417;
// geocoded addresses with the spreadsheet geocoder:
// http://blog.pamelafox.org/2008/11/geocoding-with-google-spreadsheets-and.html
var layer = null;
function initialize() {
//SET CENTER
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(20.574814, -174.642222),
zoom: 2,
scrollwheel:false,
mapTypeControl: true,
streetViewControl: false,
overviewMapControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
// CONTROLS
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
mapTypeId: 'roadmap'
});
// GET DATA
layer = new google.maps.FusionTablesLayer({
query: {
//Previous select: 'latitude', /* was 'Latitude,Longitude', used to work... */
select: 'Continent',
from: FT_TableID
}
});
//SET MAP
layer.setMap(map);
}
function changeQuery(term) {
layer.setOptions({query:{select:'Continent', /* was 'Latitude,Longitude', used to work... */
from:FT_TableID,
//OLd where:"District = "+term
where: "'Continent' contains '" + term + "'"
}
});
//alert("query="+term);
// zoom and center map on query results
//set the query using the parameter
//var queryText = encodeURIComponent("SELECT 'Latitude', 'Longitude' FROM " + FT_TableID + " WHERE Continent contains "+"'"+term+"'");
var queryText = encodeURIComponent("SELECT 'Latitude', 'Longitude' FROM " + FT_TableID + " WHERE 'Continent' contains "+"'"+term+"'");
//alert(queryText)
var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
//alert(query)
//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);
}
alert("bounds =" +bounds)
// zoom to the bounds
map.fitBounds(bounds);
}
HTML 文件： - 也有单独的 CSS 文件
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="style.css">
<script language="javascript" type="text/javascript" src="code.js"></script>
<title>Waterkeeper Locations</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
google.load('visualization', '1', {'packages':['corechart', 'table', 'geomap']});
</script>
</head>
<body onload="initialize();">
<div id="topBar">
</div>
<header>
<div id="logo"> </div>
<h1>Waterkeeper Locations Map </h1>
</header>
<div id="wrapperMain">
<div id="zoomControl">
<div class="clear"></div>
</div>
<div id="map_canvas" class="map">
</div>
<div id="legend">
<h1> Regions</h1>
<ul>
<li><label><a href="javascript:changeQuery('United States');">United States</a></label> </li>
<li><label><a href="javascript:changeQuery('South America');">South America</a></label> </li>
<li><label><a href="javascript:changeQuery('Russian');">Russian Federation</a></label> </li>
<li><label><a href="javascript:changeQuery('Mexico');">Mexico</a></label></li>
<li><label><a href="javascript:changeQuery('Asia');">Asia</a></label> </li>
<li><label><a href="javascript:changeQuery('India');">India</a></label></li>
<li><label><a href="javascript:changeQuery('Europe');">Europe</a></label></li>
<li><label><a href="javascript:changeQuery('Canada');">Canada</a></label> </li>
<li><label><a href="javascript:changeQuery('Australia');">Australia</a></label> </li>
<li><label><a href="javascript:changeQuery('Africa');">Africa</a></label> </li>
</ul>
</div>
</div>
</body>
</html>
【问题讨论】：
标签： javascript google-maps google-maps-api-3 google-fusion-tables