带侧边栏的融合桌

Question

我不确定我做错了什么，但我无法让我的标记或侧边栏出现。我不确定我遗漏了哪一部分，或者我是否只是在语法上不正确。如果您能提供帮助，我将不胜感激。

<!-- language: lang-js --> 

google.load('visualization', '1', {'packages':['table']});
var map;
var markers = [];
var infoWindow = new google.maps.InfoWindow();

function initialize() {
var ak = new google.maps.LatLng(64.958056,-147.618333);

map = new google.maps.Map(document.getElementById('map_canvas'), {
center: ak,
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP
});

var sql = encodeURIComponent("SELECT name, lat, lng, description FROM 1zFwXiOkWbKCY9xRGvXBdHjUkTsirnwbr77WjTds ORDER BY NAME");
var query = new  google.visualization.Query('https://www.googleapis.com/fusiontables/v1/query?sql=' + sql);

query.send(getData);
}

function getData(response) {
var dt = response.getDataTable();  

var side_html = '<table style="border-collapse: collapse" border="1" \
                   cellpadding="5"> \
                   <thead> \
                     <tr style="background-color:#e0e0e0"> \
                       <th>City</th> \
                     </tr> \
                   </thead> \
                   <tbody>';

for (var i = 0; i < dt.getNumberOfRows(); i++) {
  var lat = dt.getValue(i,1);
  var lng = dt.getValue(i,2);
  var name = dt.getValue(i,0);
  var description = dt.getValue(i,3);

var pt = new google.maps.LatLng(lat, lng);

var html = "<strong>" + name + "</strong><br />";

  side_html += '<tr> \
                  <td><a href="javascript:myclick(' + i + ')">' + name + '</a></td> \
                </tr>';


  createMarker(pt, html);

}

side_html += '</tbody> \
            </table>';
document.getElementById("side_bar").innerHTML = side_html;
}


function createMarker(point,info) {
var iconURL = 'uaf-icon.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 = 'uaf-shadow.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");
}

Answer 1

您的查询无效： "SELECT name, lat, lng, description FROM 1zFwXiOkWbKCY9xRGvXBdHjUkTsirnwbr77WjTds ORDER BY NAME"

应该是： “从 1zFwXiOkWbKCY9xRGvXBdHjUkTsirnwbr77WjTds 中选择名称、纬度、lng、描述按名称排序” （“name”列的名称为小写，ORDER BY 取列名）。

您需要决定是使用 Fusion Table API v1.0 还是可视化 API (AKA GViz)，看起来您的代码是为使用 GViz 而编写的，但您将查询发送到 v1 API。

这对我有用：

var queryStr = "SELECT name, lat, lng, description FROM 1zFwXiOkWbKCY9xRGvXBdHjUkTsirnwbr77WjTds ORDER BY name";
var queryText = encodeURIComponent(queryStr);
  var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq='  + queryText);

并在响应处理中添加错误检查，让您了解发生了什么（它正在超时）：

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();  

working example