融合表与侧边栏 - 查询中的错误 [英] fusion table with sidebar - error in query
问题描述
我尝试使用融合表制作带有侧边栏的地图。我修改了我在stackoverflows.com上找到的代码，但是看到一条错误消息：查询中出错：无法分析查询。
出了什么问题？代码如下：
I tried to make a map with a sidebar by using a fusion table. I adapted the codes I found on stackoverflows.com but I see an error message : Error in query: Could not parse query. What is wrong ? The codes are as below:
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<!--Load the AJAX API-->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" >
var tableId = "1zELV0V48On-5c8aqKM_PD2cMQtfy4hByyR5o8sQ";
google.load('visualization', '1', {'packages':['table']});
var map;
var markers = [];
var infoWindow = new google.maps.InfoWindow();
function initialize() {
var istanbul = new google.maps.LatLng(41.049, 28.991);
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: istanbul,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var FTlayer = new google.maps.FusionTablesLayer({query:{from:tableId}, map:map});
var queryStr = "SELECT hotels, location, phone, url FROM "+tableId+" ORDER BY hotels";
document.getElementById('info').innerHTML += queryStr +"<br>";
var queryText = encodeURIComponent(queryStr);
var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
query.send(getData);
}
function getData(response) {
if (!response) {
alert('no response');
return;
}
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var dt = response.getDataTable();
var side_html = '<table style="border-collapse: collapse" border="1" \
cellpadding="5"> \
<thead> \
<tr style="background-color:#e0e0e0"> \
<th>Hotels</th> \
</tr> \
</thead> \
<tbody>';
document.getElementById('info').innerHTML += "rows="+dt.getNumberOfRows()+"<br>";
for (var i = 0; i < dt.getNumberOfRows(); i++) {
var location = dt.getValue(i,1);
var phone = dt.getValue(i,2);
var hotels = dt.getValue(i,0);
var url = dt.getValue(i,3);
var pt = new google.maps.LatLng(lat, lng);
var html = "<strong>" + hotels + "</strong><br />";
side_html += '<tr> \
<td><a href="javascript:myclick(' + i + ')">' + hotels + '</a></td> \
</tr>';
createMarker(pt, html);
}
side_html += '</tbody> \
</table>';
document.getElementById("side_bar").innerHTML = side_html;
}
function createMarker(point,info) {
var iconURL = 'tools/pinred.png'; var iconSize = new google.maps.Size(29,60);
var iconOrigin = new google.maps.Point(0,0); var iconAnchor = new google.maps.Point(15,60);
var myIcon = new google.maps.MarkerImage(iconURL, iconSize, iconOrigin, iconAnchor);
var shadowURL = 'tools/pinred.png'; var shadowSize = new google.maps.Size(63, 60);
var shadowOrigin = new google.maps.Point(0, 0); var shadowAnchor = new google.maps.Point(15, 60);
var myShadow = new google.maps.MarkerImage(shadowURL, shadowSize, shadowOrigin, shadowAnchor);
var iconShape = [18,0,20,1,22,2,23,3,24,4,25,5,26,6,27,7,27,8,28,9,28,10,28,11,28,12,28,13,28,14,28,15,28,16,28,17,28,18,28,19,27,20,27,21,26,22,26,23,25,24,24,25,23,26,21,27,20,28,16,29,21,31,21,32,21,33,21,34,21,35,20,36,20,37,20,38,19,39,19,40,19,41,18,42,18,43,18,44,18,45,17,46,17,47,17,48,17,49,16,50,16,51,16,52,15,53,15,54,15,55,14,56,14,57,14,58,14,59,13,59,13,58,13,57,13,56,12,55,12,54,12,53,12,52,11,51,11,50,11,49,11,48,11,47,10,46,10,45,10,44,10,43,9,42,9,41,9,40,9,39,9,38,8,37,8,36,8,35,8,34,8,33,7,32,7,31,12,29,9,28,7,27,6,26,4,25,3,24,3,23,2,22,1,21,1,20,0,19,0,18,0,17,0,16,0,15,0,14,0,13,0,12,0,11,0,10,1,9,1,8,2,7,2,6,3,5,4,4,5,3,6,2,8,1,10,0,18,0];
var myMarkerShape = {
coord: iconShape,
type: 'poly'
};
var myMarkerOpts = {
position: point,
map: map,
icon: myIcon,
shadow: myShadow,
shape: myMarkerShape
};
var marker = new google.maps.Marker(myMarkerOpts);
markers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
infoWindow.close();
infoWindow.setContent(info);
infoWindow.open(map,marker);
});
}
function myclick(num) {
google.maps.event.trigger(markers[num], "click");
}
</script>
<body onload="initialize();">
<table border="1"><tr><td>
<div id="map_canvas" style="width:600px;height:500px;"></div>
</td><td>
<div id="side_bar" style="width:200px;height:300px; overflow: auto;"></div>
</td></tr></table>
<div id="info"></div>
</body>
</html>
推荐答案
您的查询错误，您正在查询：
Your query is wrong, you are querying for:
var queryStr = "SELECT hotels, location, phone, url FROM "+tableId+" ORDER BY hotels";
表中的列有不同的名称（第一个字符是大写）。
The columns in your table have different names (the first character is upper case).
这适用于我：
This works for me:
var queryStr = "SELECT Hotels, Location, Phone, Url FROM "+tableId+" ORDER BY Hotels";
但是当你的位置没有坐标时，你将会遇到其他问题（lat和lng未定义），您需要外部对它们进行地理编码，并为地理坐标添加一列或两列，以实现此功能（您可以尝试对点击地理位置进行地理编码，但这不是实现此目的的最佳方式）。
But then you will have other problems as your locations don't have coordinates (lat and lng are undefined), you will need to geocode them externally and add a column or two for the geographic coordinates for this to work (you can try geocoding the location on click, but that is not the best way to do it).
点击时进行地理编码的概念验证 - 问题：有些的地址分配到不同的位置，或者根本不需要进行地理编码。
proof of concept for geocoding on click - issue: some of the addresses geocode to different locations than are in the FusionTable or don't geocode at all.
电话号码为空，因为在您的表格中，您已将该列定义为是类型号，但它包含文本。
The phone number is null because in your table you have that column defined to be of type number, but it contains text.
在新表格（副本）中使用纬度/经度列的概念证明（将手机列从数字改为文字）。
proof of concept using lat/lng columns in (a copy of) your new table (changed the "phone" column from number to text).
这篇关于融合表与侧边栏 - 查询中的错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
