Google maps api 3 带有侧边栏的融合表-查询错误_Google Maps Api 3_Google Fusion Tables

Google maps api 3 带有侧边栏的融合表-查询错误

google-maps-api-3

Google maps api 3 带有侧边栏的融合表-查询错误,google-maps-api-3,google-fusion-tables,Google Maps Api 3,Google Fusion Tables,我试图用一个融合表制作一张带有侧边栏的地图。我修改了在stackoverflows.com上找到的代码，但我看到一条错误消息：查询出错：无法解析查询。怎么了？代码如下： <!DOCTYPE html> <html> <head> <title>Google Maps JavaScript API v3 Example: Map Simple</title> <meta name="

我试图用一个融合表制作一张带有侧边栏的地图。我修改了在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>

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

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

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

这对我很有用：

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

但是你会遇到其他问题，因为你的位置没有坐标lat和lng是未定义的，你需要在外部对它们进行地理编码，并为地理坐标添加一列或两列。为了实现这一点，你可以尝试在单击时对位置进行地理编码，但这不是最好的方法

-问题：某些地址的地理编码位置与Fusionable中的不同，或者根本不进行地理编码

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

将电话列从数字更改为文本。

这意味着查询不正确。对照表检查列名。您是对的。我为信息窗口添加了lat lng列和一些代码。它可以工作，但也存在一些问题：1-一些位置是错误的，47个位置中有16个是错误的，例如四季酒店、Cihangir otel、Swissotel：红色点是正确的，但当从侧边栏单击酒店名称时，它会显示错误的位置。lat和lng显示为41.03344\n 28.98537\n 2-电话号码显示为空。您可以看到“我能做什么”页面。如果添加lat/lng列，则不再需要地理编码器。使用表中的坐标放置标记并打开信息窗口。对不起，我不明白。当我添加lat lang时，地图会自动进行地理编码。我无法使用“移动pin”选项手动更正位置。我将如何放置正确的标记？将lat lang[sic]列中的值更改为正确的位置。请参阅我的回答中的附加示例，在没有地理编码的情况下使用侧栏固定列中的坐标，以使位置显示在您认为正确的位置，即工作电话号码。