单击重叠多边形时合并 InfoWindow 数据？

Question

是否可以在单击时将特定点的所有多边形数据（描述和名称）合并到一个信息窗口中？我有一些重叠的多边形，信息窗口只显示最上面的数据。似乎这应该可以使用 Fusion Tables 和地图上的单击侦听器，以便当有人单击地图时，会向 Fusion Tables 发送查询以查找与单击的点相交的所有多边形（使用 ST_INTERSECTS 和CIRCLE 和一个非常小的半径）。我的 Fusion Table 中仅有的列是 Name、Description 和 Geometry（包含标准 KML）。

这是就我而言。多边形正在显示，圆圈正在渲染并居中单击。 InfoWindow 正在显示 [object Object]。

var lat = 37.4;
var lng = -122.1;
var tableid = '1mxcz4IDL1U7ItrqulVzt01fMasj5zsmBFUuQh6iM';
var meters = 10000;


layer = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
    from: tableid,
}
});



layer.setMap(map);



google.maps.event.addListener(layer, 'click', function(event) {
changeCenter(event);
});



function changeCenter(event) {
lat = event.latLng.lat();
lng = event.latLng.lng();
circle.setCenter(event.latLng);
}



circle = new google.maps.Circle({
center: new google.maps.LatLng(lat, lng),
radius: meters,
map: map,
fillOpacity: 0.2,
strokeOpacity: 0.5,
strokeWeight: 1,
});



comboname = new google.maps.FusionTablesLayer({
query: {
select: 'name',
from: tableid,
where: 'ST_INTERSECTS(geometry, CIRCLE(LATLNG(' + lat + ',' + lng + '),' + meters + '))'
}
});



google.maps.event.addListener(layer, 'click', function(e) {
      // Display all of the names in the InfoWindow
e.infoWindowHtml = comboname;
    });

}

Answer 1

FusionTablesLayer 不提供与显示的功能相关的任何数据。

当您想从 FusionTable 获取数据时，您必须通过 REST-API 请求它们（当 API 打开 InfoWindow 时也会发生这种情况，当您查看 Network-Traffic 时，您会看到有为 InfoWindow 加载数据的请求）。

REST-API 支持 JSONP，因此您可以直接通过 JS 请求数据。

SELECT 的要求

1. 有效的 google-API 密钥
2. 必须为项目启用服务Fusion Tables API
3. FusionTable 必须配置为可下载（您示例中的表格已经可下载）

示例实现：

function initialize() {
  var goo       = google.maps,

      //your google maps API-key
      gooKey    = 'someGoogleApiKey',

      //FusionTable-ID
      ftId      = '1mxcz4IDL1U7ItrqulVzt01fMasj5zsmBFUuQh6iM',

      //1km should be sufficient
      meters    = 1000,

      map       = new goo.Map(document.getElementById('map_canvas'),
                    {
                      zoom: 6,
                      center: new goo.LatLng(36.8,-111)
                    }),
      //we use our own InfoWindow
      win       = new goo.InfoWindow;

      //function to load ft-data via JSONP 
      ftQuery   = function(query,callback){
                    //a random name for a global function
                    var fnc     = 'ftCallback'+   new Date().getTime()
                                               +  Math.round(Math.random()*10000), 
                        url     = 'https://www.googleapis.com/fusiontables/v2/query?',
                        params  = {
                                    sql       : query,
                                    callback  : fnc,
                                    key       : gooKey
                                  },
                        get     =[],
                        script  = document.querySelector('head')
                                    .appendChild(document.createElement('script'));
                    for(var k in params){
                      get.push([encodeURIComponent(k),
                                encodeURIComponent(params[k])
                               ].join('='));
                    }
                    window[fnc]=function(r){
                      callback(r);
                      delete window[fnc];
                      document.querySelector('head').removeChild(script);
                    }
                    script.setAttribute('src',url+get.join('&'));

                  },

      ftLayer   = new goo.FusionTablesLayer({
                    query: {
                        select: 'geometry',
                        from: ftId,
                      },
                    map:map,
                    suppressInfoWindows:true
                  });


      goo.event.addListener(ftLayer,'click',function(e){

        var sql ='SELECT name  FROM ' + ftId +
                 ' WHERE  ST_INTERSECTS(geometry,'+ 
                 ' CIRCLE(LATLNG(' +e.latLng.toUrlValue()+ '),'+ meters + '))',
            cb  = function(response){
              if(response.error){
                try{
                    alert(response.error.errors[0].message);
                }
                catch(e){
                    alert('error while retrieving data from fusion table');
                }
                return;
              }

              var content = [];
              for(var r = 0; r < response.rows.length; ++r){
                content.push(response.rows[r][0]);
              }
              //open the infowindow with the desired content
              win.setOptions({
                content:'<ol><li>'+content.join('</li><li>')+'</li></ol>',
                map:map,
                position:e.latLng
              });
            };
        ftQuery(sql,cb);
      });
}

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

演示：http://jsfiddle.net/doktormolle/ckyk4oct/