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

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图层对象。看起来最简单的方法是在初始化Google Fusion Tables图层对象期间将上述查询作为参数提供（如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会对象时失败，但Fusion Tables REST API查询在浏览器中正常工作。我已经阅读了API，但关于这个特定主题的页面却令人惊讶地不完整。有任何想法吗？我希望我可以包含更多指向我正在使用的特定API的链接，但是我的StackOverflow声誉不够高，无法发布超过2个网址。最终目标是只有通过查询获得的数据的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

代码片段：

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>