如何解析 Google Fusion Tables 中的几何字段以缩放到 Google Maps API V3 中的多边形坐标？

Question

我有一张使用 Google 的 Fusion Tables and Maps API V3 here 的功能地图。除了我的 3 个多边形外，一切都正常工作，当我想出下一步时，我将修复这些多边形。有人问我是否可以让每个复选框选择缩放到有问题的多边形。我已经尝试使用 geoXml.parseKmlString() 方法和 Google 的 Visualization API 来完成此请求，正如许多其他帖子中所建议的那样，但没有成功。我对 JavaScript 还是比较陌生，对 Google 的 geoxml3 KML 处理器和可视化 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