如何在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