Fusion Tables Layer Query永久瓦片加载问题

Question

我已经定期使用 Google Fusion Tables 几年了，尽管我还是个新手。

我最近负责查询我的 table 之一的地理空间关系。我找到了一个很好的例子，它完全按照我的需要运行，并用我的 tableId 更新了代码，确保位置列完全相同（拼写、大写等），但是当我尝试更新时地图层，它让我在瓷砖上永久 "Data may still be loading. Drag or refresh to find out!"。我的 table 是 public，可下载数据...我不确定我缺少什么。

我被难住了。我包含了下面的代码，并简单地使用 // 来禁用示例中的 tableid。

任何 assistance/suggestions 将不胜感激！ ~妮可

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

Answer 1

当您看到“"Data may still be loading." 消息时，通常表示您的查询无效。

您的示例有一个旧的 "numeric" table ID。新的 "encrypted" table 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

代码片段：

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;
}

html,
body {
  font-family: Arial, sans-serif;
  padding: 0px;
  margin: 0px;
  height: 100%;
  width: 100%;
}
#map_canvas {
  height: 80%;
  width: 100%;
}

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

Fusion Tables Layer Query永久瓦片加载问题

Fusion Tables Layer Query permanent tile loading issues

google-visualization

google-fusion-tables