使用 FusionTablesLayerOptions 的查询参数的 Google Fusion Table Query 不起作用

Question

我的目标是根据 Fusion Table 的查询结果创建 google.maps.FusionTablesLayer。我有一个公开的Google Fusion Table，它已“启用下载”。我能够使用 Google Fusion Tables REST API 成功查询表，如下所示（我会提供指向该 API 的链接，但没有足够的声誉）。以下查询在浏览器中有效：

https://www.googleapis.com/fusiontables/v2/query?sql=SELECT+start_lat+,+dir+FROM+1JUAkUL5H7IhU4QrmLuVQ65Tg2SNyI5Xqm3A7Nk1g+WHERE+dir=%27Northbound%27&key=AIzaSyBCjde_rx_Fe0v4G_vD-uI33M1o9toMF2A。

我真正想要的是能够使用查询结果创建一个 Google Fusion Tables Layer Object。似乎最简单的方法是在 Google Fusion Tables Layer Object 初始化期间提供上述查询作为参数（如 JavaScript FusionTablesLayer API 中所示）。但是在初始化的时候查询FusionTablesLayer却没有显示出来，如下：

northbound_hikers_start_layer = new google.maps.FusionTablesLayer({
  query: {
    select: 'start_lat',
    from: '1JUAkUL5H7IhU4QrmLuVQ65Tg2SNyI5Xqm3A7Nk1g',
    where: "dir = 'Northbound'"
  },
  heatmap: {
    enabled: true
  },
  suppressInfoWindows: false
});

在将查询作为参数传递给 FusionTablesLayer 对象时，我无法理解为什么“where”子句失败，但 Fusion Tables REST API 查询在浏览器中运行良好。我已经阅读了 API，但是关于这个特定主题的页面令人惊讶地不完整。有任何想法吗？我希望我可以包含更多指向我正在使用的特定 API 的链接，但我的 StackOverflow 声誉不足以发布超过 2 个 URL。最终目标是一个仅包含查询获得的数据的 FusionTablesLayer。

编辑：当我删除“where”子句时知道地图正确显示可能会有所帮助（这让我相信查询是问题所在）。我忘了提到我确实为图层分配了如下地图：

 $("button").click(function() {
   console.log(this.id + " button was pressed.");
   if (this.id == "toggle-at-centerline-button") {
     //Toggle AT Centerline Layer
     if (!toggle_at_centerline_button_pressed) {
       centerline_layer.setMap(map);
       toggle_at_centerline_button_pressed = true;
     } else {
       centerline_layer.setMap(null);
       toggle_at_centerline_button_pressed = false;
     }
   } else if (this.id == "toggle-at-shelter-button") {
     //Toggle AT Shelters Layer
     if (!toggle_at_shelter_button_pressed) {
       shelterLayer.setMap(map);
       toggle_at_shelter_button_pressed = true;
     } else {
       shelterLayer.setMap(null);
       toggle_at_shelter_button_pressed = false;
     } etc...
});

Answer 1

您需要设置FusionTablesLayerOptions 的map 属性（或至少在某个时候设置）：

var northbound_hikers_start_layer = new google.maps.FusionTablesLayer({
  query: {
    select: 'start_lat',
    from: '1JUAkUL5H7IhU4QrmLuVQ65Tg2SNyI5Xqm3A7Nk1g',
    where: "dir = 'Northbound'"
  },
  heatmap: {
    enabled: true
  },
  suppressInfoWindows: false,
  map: map
});

proof of concept fiddle

代码 sn-p：

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(39.232253, -76.640625),
      zoom: 4,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var northbound_hikers_start_layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'start_lat',
      from: '1JUAkUL5H7IhU4QrmLuVQ65Tg2SNyI5Xqm3A7Nk1g',
      where: "dir = 'Northbound'"
    },
    heatmap: {
      enabled: true
    },
    suppressInfoWindows: false,
    map: map
  });
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>