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

Question

我在這里使用Google的Fusion Tables和Maps API V3 來運行地圖。 一切都適用於我的三個多邊形的例外情況，當我想到下一步時，我會修復它。 我被問到是否可以讓每個復選框選擇縮放到有問題的多邊形。 我已經嘗試使用geoXml.parseKmlString()方法和Google的Visualization API來完成此請求，正如許多其他帖子所建議的那樣，沒有運氣。 我仍然是JavaScript的新手，也是Google的geoxml3 KML處理器和Visualization API的新手。

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

裝配圖

我無法使用我的代碼。

有沒有人對如何將匯編映射中的代碼合並到我的代碼中以使用我已有的正常運行代碼有任何建議？

謝謝你的時間。

我目前的代碼如下：

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