使用FusionTablesLayerOptions'的Google Fusion表查询;查询参数不起作用

Google Fusion Table Query using FusionTablesLayerOptions' query parameter not working

本文关键字:查询 参数 不起作用 Fusion FusionTablesLayerOptions 使用 Google      更新时间:2023-09-26

我的目标是从Fusion表的查询结果创建一个google.maps.FusionTablesLayer。我有一个公开可用的谷歌融合表,它已经"启用下载"。我能够使用Google Fusion Tables REST API成功地查询表,如下所示(我会提供API的链接,但没有足够的信誉)。以下查询适用于浏览器:

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

我真正想要的是能够用查询结果创建一个GoogleFusionTablesLayer对象。要做到这一点,最简单的方法似乎是在Google Fusion Tables Layer Object初始化期间提供上述查询作为参数(如JavaScript Fusion TablesLayer 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...
});

您需要设置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
});

概念验证小提琴

代码片段:

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>