Question

单击时，是否可以将特定点的所有多边形数据（描述和名称）组合成一个InfoWindow？我有一些重叠的多边形，InfoWindow只显示最顶层的数据。看起来应该可以使用地图上的Fusion Tables和点击监听器，以便当有人点击地图时，会向Fusion Tables发送一个查询，以查找与点击的点相交的所有多边形（使用ST_INTERSECTS和CIRCLE和一个非常小的半径）。 Fusion表中唯一的列是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时发生，当您查看网络流量时，您会看到有一个请求加载InfoWindow的数据。

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

SELECT

的要求

有效的google-API密钥
必须为项目启用服务Fusion Tables API
必须将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/

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

1 个答案: