如何解析Google Fusion Tables中的幾何字段以縮放到Google Maps API V3中的多邊形座標？

Question

我使用Google的Fusion Tables和Maps API V3 here來生成功能正常的地圖。除了我的三個多邊形之外，一切都可以工作，當我決定下一步時，我會解決這個問題。我被問到是否可以讓每個複選框選擇縮放到相關的多邊形。我曾嘗試使用geoXml.parseKmlString()方法和Google的Visualization API來完成此請求，正如許多其他帖子中所建議的，但沒有運氣。我對JavaScript仍然比較陌生，對於Google的geoxml3 KML處理器和Visualization API也是全新的。

我已經看過了各種實例，試圖弄清楚這一點，最近的我能找到的是：

Assembly Map

我無法得到它與我的代碼工作。

有沒有人有任何建議，我可以如何將來自Assembly Map的代碼合併到我的代碼中，以與我已有的功能代碼一起工作？

謝謝你的時間。

我當前的代碼如下：

var map; 
var catchSD8 = new google.maps.LatLng(50.0267110, -116.907234); 
var tableId = '1yc4wo1kBGNJwpDm6e-eJY_KL1YhQWfftjhA38w8'; 
var varID = [ 
    "Adam Robertson Elementary", 
    "Blewett Elementary", 
    "Brent Kennedy", 
    "Canyon-Lister Elementary", 
    "Crawford Bay Elementary/Secondary", 
    "Erickson Elementary", 
    "Hume Elementary", 
    "JV Humphries Elementary", 
    "JV Humphries Secondary", 
    "Jewett Elementary", 
    "Kootenay Lake", 
    "Lower Kootenay Band", 
    "LV Rogers Secondary", 
    "Mount Sentinel Middle", 
    "Mount Sentinel Secondary", 
    "Prince Charles Secondary", 
    "Redfish Elementary", 
    "Rosemont Elementary", 
    "Salmo Elementary", 
    "Salmo Secondary", 
    "Trafalgar Middle School", 
    "W.E. Graham Community Elementary", 
    "W.E. Graham Community Secondary", 
    "Winlaw Elementary", 
    "Yahk Elementary"  
]; 

function initialize() { 
    var myOptions = new google.maps.Map(document.getElementById('map_canvas'), { 
     center: catchSD8, 
     zoom: 8, 
     zoomControl: true, 
     zoomControlOptions: { 
     style: google.maps.ZoomControlStyle.SMALL 
     }, 
     scaleControl: true, 
     scaleControlOptions: { 
     position: google.maps.ControlPosition.BOTTOM_LEFT 
     }, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
    map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 
    var layer = new google.maps.FusionTablesLayer(); 
    filterMap(layer, tableId, map); 

    var mySchool; 
    var limit = varID.length; 
    for(var i=0; i < limit; i++){ 
     mySchool = document.getElementById(varID[i]); 
     (function(schl,lyr,tbl,mp){ 
      google.maps.event.addDomListener(schl,'click', function() { 
       filterMap(lyr,tbl,mp);     
      }); 

     }(mySchool,layer,tableId,map)); 
    } 
} 

// Filter the map based on checkbox selection. 
function filterMap(layer, tableId, map) { 
    var where = generateWhere(); 

    if (where) { 
     if (!layer.getMap()) { 
     layer.setMap(map); 
     } 
     layer.setOptions({ 
     query: { 
      select: 'Location', 
      from: tableId, 
      where: where 
     } 
     }); 
    } else { 
     layer.setMap(null); 
    } 
} 

// Generate a where clause from the checkboxes. If no boxes 
// are checked, return an empty string. 
function generateWhere() { 
    var filter = []; 
    var schools = document.getElementsByName('school'); 
    for (var i = 0, school; school = schools[i]; i++) { 
     if (school.checked) { 
     var schoolName = school.value.replace(/'/g, '\\\''); 
     filter.push("'" + schoolName + "'"); 
     } 
    } 
    var where = ''; 
    if (filter.length) { 
     where = "School IN (" + filter.join(',') + ')'; 
    } 
    return where; 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

Answer 1

首先需要加載使用的庫：

<script type="text/javascript" src="http://www.google.com/jsapi"></script>   
    <script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script> 
    <script type="text/javascript"> 
    google.load('visualization', '1', {'packages':['corechart', 'table', 'geomap']}); 
    </script> 

而且zoom2query()和zoomTo()複製功能集成到您的文檔。

裏面的功能filterMap（）與查詢作爲參數調用zoomToQuery（）：

function filterMap(layer, tableId, map) { 
    var where = generateWhere(); 

    if (where) { 
     zoom2query('SELECT Location from '+tableId+ ' where '+where); 
     //continue with your code