0

我尝试使用融合表制作带有侧边栏的地图。我修改了在 stackoverflows.com 上找到的代码，但我看到一条错误消息：查询错误：无法解析查询。怎么了 ？代码如下：

      <!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>
4

1 回答 1

1

您的查询是错误的，您正在查询：

var queryStr = "SELECT hotels, location, phone, url FROM "+tableId+" ORDER BY hotels";

表中的列具有不同的名称（第一个字符为大写）。

这对我有用：

var queryStr = "SELECT Hotels, Location, Phone, Url FROM "+tableId+" ORDER BY Hotels";

但随后您将遇到其他问题，因为您的位置没有坐标（纬度和经度未定义），您需要在外部对它们进行地理编码并添加一两列以使地理坐标起作用（您可以尝试地理编码点击位置，但这不是最好的方法）。

单击时地理编码的概念证明- 问题：某些地址地理编码到与 FusionTable 中不同的位置，或者根本不进行地理编码。

电话号码为空，因为在您的表中，您将该列定义为数字类型，但它包含文本。

使用新表（副本）中的 lat/lng 列的概念证明（将“电话”列从数字更改为文本）。

于 2013-09-22T16:38:43.290 回答