FusionTablesLayer where子句不起作用＆幾何不顯示Google Maps JavaScript API

Question

在我腦海里：

<script type="text/javascript">
window._initHomeMap = function(){
    if( document.getElementById('map') !== null ){
        var map = new google.maps.Map(document.getElementById('map'), {
            center: new google.maps.LatLng(30,0),
            zoom: 2,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: true,
            scrollwheel: false,
            draggable: false,
        });

        var world_geometry = new google.maps.FusionTablesLayer({
            query: {
                select: 'geometry',
                from: '1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk',
                where: 'ISO_2DIGIT IN ("US", "CA", "AF")',
            },
            heatmap: {
              enabled: false
            },
            suppressInfoWindows: true,
            map: map,
            options: {
              styleId: 2,
              templateId: 2
            },
            styles: [{ //included because geometry not showing up
                polygonOptions: {
                    fillColor: '#FF0000',
                    fillOpacity: 0.4
                }
            }],
        });
    }
}
</script>

在我體內：

<div id="map"></div>

在閉包標簽之前：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBrRJwJFfNCdVLJwa6yhR8UBZR1m2A018Q&amp;callback=window._initHomeMap"></script>

結果：

我想從其中具有國家/地區幾何圖形的FusionTable中提取信息，並在Google地圖上顯示國家/地區邊界。 但是由於某種原因，幾何圖形無法顯示（除非我使用了styles屬性），並且查詢中的where子句無法正常工作。 我一直在搜尋SO和其他地方，但找不到我做錯的事情。 在這里待了幾個小時。 任何幫助/指導表示贊賞！

Answer 1

如果我使用FusionTables UI生成查詢，則會得到（對我有用）：

  query: {
    select: 'geometry',
    from: '1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk',
    where: "ISO_2DIGIT IN ('US', 'CA', 'AF')",
  },

（請注意，在以下where:交換了" ＆ ' ：）

概念證明

代碼段：

 window._initHomeMap = function() { if (document.getElementById('map') !== null) { var map = new google.maps.Map(document.getElementById('map'), { center: new google.maps.LatLng(30, 0), zoom: 2, mapTypeId: google.maps.MapTypeId.ROADMAP, disableDefaultUI: true, scrollwheel: false, draggable: false, }); var world_geometry = new google.maps.FusionTablesLayer({ query: { select: 'geometry', from: '1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk', where: "ISO_2DIGIT IN ('US', 'CA', 'AF')", }, heatmap: { enabled: false }, suppressInfoWindows: true, map: map, options: { styleId: 2, templateId: 2 }, styles: [{ //included because geometry not showing up polygonOptions: { fillColor: '#FF0000', fillOpacity: 0.4 } }], }); } } google.maps.event.addDomListener(window, "load", window._initHomeMap); 

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

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