Fusion Tables Layer查询永久磁贴加载问题

时间:2015-04-01 20:41:35

标签: google-visualization google-fusion-tables

我已经定期使用Google Fusion Tables几年了,不过我还是个新手。

我最近被指控在地理空间关系中查询我的一张桌子。我找到了一个很好的例子,它完全按照我的需要运行,并用我的tableId更新代码,确保位置列完全相同(拼写,大小写等),但是当我尝试更新地图图层时,它给了我一个永久的“数据可能仍在加载。拖动或刷新以找出答案!”在瓷砖上。我的桌子是公开的,可下载的数据......我不确定我错过了什么。

我很难过。我已经包含了下面的代码,只是使用//来禁用示例中的tableid。

非常感谢任何帮助/建议! 〜尼科尔

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

<title>Austin TX Delivery Locations</title>

<style>
  body { font-family: Arial, sans-serif; padding: 0px; margin: 0px; }
  #map_canvas { height: 80%; width:100%; }
#query{font-family:courier;}

</style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

var tableid = '11QnfV_1v3N5GQs70e13SRxGR6_zYOSFJlCpMuD3C';
//var tableid = 790805;

function initialize() {

  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: new google.maps.LatLng(30.35, -97.70),
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  google.maps.event.addListener(map, 'click', function(event) {
    latlng = event.latLng;
    updateQuery();
    });

   query = {
      select: 'address',
      from: tableid
    }
  layer = new google.maps.FusionTablesLayer(tableid);
  layer.setMap(map);

}


function updateQuery(){
  var limit = document.getElementById('limit').value;
  var lat = parseInt(latlng.lat() * 1000) / 1000;
  var lng = parseInt(latlng.lng() * 1000) / 1000;
  query = "SELECT address FROM " + tableid;
  query += " ORDER BY ST_Distance(address, LatLng(" + lat + ',' + lng + "))";
  query += " LIMIT " + limit;
  layer.setQuery(query);
  document.getElementById('query').innerHTML = layer.getQuery();
}

</script>
</head>
<body onLoad="initialize()">
  <div id="map_canvas"></div>
  <input type="text" id="limit" value="50" onChange="javascript:updateQuery()"/>
  <div id="query"></div>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

当您看到&#34;&#34;数据可能仍在加载时。&#34;消息通常意味着您的查询无效。

你的例子有一个旧的&#34;数字&#34;表id。新&#34;加密&#34;的语法表格ID不同(以及currently documented

Constructor                                         Description
FusionTablesLayer(options:FusionTablesLayerOptions) A layer that displays data from a Fusion Table.

变化:

query = {
  select: 'address',
  from: tableid
}
layer = new google.maps.FusionTablesLayer(tableid);
layer.setMap(map);

要:

query = {
    select: 'address',
    from: tableid,
};
layer = new google.maps.FusionTablesLayer({query: query });
layer.setMap(map);

您在updateQuery中的查询:

query = {
    select: 'address',
    from: tableid,
    limit: limit,
    orderBy: ST_Distance(address, LATLNG(" + lat + ',' + lng + "))"
}
layer.setQuery(query);

working fiddle

代码段:

&#13;
&#13;
var tableid = '11QnfV_1v3N5GQs70e13SRxGR6_zYOSFJlCpMuD3C';
//var tableid = 790805;
var latlng;

function initialize() {

  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: new google.maps.LatLng(30.35, -97.70),
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  google.maps.event.addListener(map, 'click', function(event) {
    latlng = event.latLng;
    updateQuery(latlng);
  });

  query = {
    select: 'address',
    from: tableid
  };
  layer = new google.maps.FusionTablesLayer({
    query: query
  });
  layer.setMap(map);

}
google.maps.event.addDomListener(window, 'load', initialize);

function updateQuery(latlng) {
  var limit = document.getElementById('limit').value;
  query = {
    select: 'address',
    from: tableid,
    limit: limit,
    orderBy: 'ST_Distance(address, LATLNG(' + latlng.lat() + ',' + latlng.lng() + '))'
  }
  layer.setQuery(query);
  var queryObj = layer.getQuery()

  var queryStr = "from:" + queryObj.from + "<br>";
  queryStr += "select:" + queryObj.select + "<br>";
  queryStr += "limit:" + queryObj.limit + "<br>";
  queryStr += "orderBy:" + queryObj.orderBy + "<br>";

  document.getElementById('query').innerHTML = queryStr;
}
&#13;
html,
body {
  font-family: Arial, sans-serif;
  padding: 0px;
  margin: 0px;
  height: 100%;
  width: 100%;
}
#map_canvas {
  height: 80%;
  width: 100%;
}
&#13;
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
<input type="text" id="limit" value="50" onChange="javascript:updateQuery()" />
<div id="query"></div>
&#13;
&#13;
&#13;