带有侧边栏的融合桌 [英] fusion table with sidebar

问题描述

我不确定自己在做什么错，但是我无法显示标记或侧边栏.我不确定缺少哪一部分，或者语法是否刚刚好.如果可以的话，我将不胜感激.

I am not sure what I am doing wrong but I am not able to get my markers or sidebar to show up. I am not sure what part I am missing or if I am just off in the syntax. If you could help I would so appreciate it.

<!-- 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");
}

推荐答案

您的查询无效: 从名称1zFwXiOkWbKCY9xRGvXBdHjUkTsirnwbr77WjTds中按名称选择SELECT名称，经纬度，Lng，描述"

Your query is invalid: "SELECT name, lat, lng, description FROM 1zFwXiOkWbKCY9xRGvXBdHjUkTsirnwbr77WjTds ORDER BY NAME"

应为: 选择名称，经纬度，lng，描述来自名称的1zFwXiOkWbKCY9xRGvXBdHjUkTsirnwbr77WjTds按名称排序" (名称"列的名称为小写，ORDER BY为列名.)

should be: "SELECT name, lat, lng, description FROM 1zFwXiOkWbKCY9xRGvXBdHjUkTsirnwbr77WjTds ORDER BY name" (the name of the "name" column is lower case, ORDER BY takes a column name).

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

You need to decide whether you are going to use the Fusion Table API v1.0 or the visualization API (AKA GViz), it looks your code is written to use GViz, but you are sending the query to the 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);

并将错误检查添加到响应处理中，使您可以查看发生了什么(正在超时):

And adding error checking to the response handling, lets you see what is going on (it was timing out):

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

工作示例

这篇关于带有侧边栏的融合桌的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！