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

-1

单击时是否可以将特定点处的所有多边形数据（描述&名称）组合到一个InfoWindow中？我有一些重叠的多边形，InfoWindow只显示最顶层的数据。看起来应该可以在地图上使用Fusion Tables和click click listener，这样当有人点击地图时，查询将发送到Fusion Tables以查找与点击点相交的所有多边形（使用ST_INTERSECTS和CIRCLE和一个非常小的半径）。我的Fusion Table中唯一的列是Name，Description和Geometry（包含标准KML）。重叠多边形点击时合并InfoWindow数据？

这就像我一样。多边形正在显示，圆形正在渲染并居中点击。 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; 
    }); 

}

来源

2015-08-27 Michael Frans

听起来应该工作。你试过了吗？ – geocodezip

添加上面的代码，仍然没有运气。 –

我使用'PostGIS'->'geoJSON'->'[layerName] = new google.maps.Data（）; k.addGeoJson（geoJSON，[etc]）;'而不是FusionTables。我发现要做到这一点的唯一方法就是将点击的'latLng'带回到PostGIS并执行所有的数据查询。遍历数据层的特征（通过'k.ForEach（function（feature）{}），并将几何结果放入一系列'Polygon'对象中，但却无法获得'containsLocation（[ clickEvent.latLng]，[feature.geometry]）'效用函数正确触发。 –

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

当你想要从FusionTable中获取数据时，你必须通过REST-API来请求它们（这也会发生在API打开InfoWindow的时候，当你看一下网络流量时你会看到有一个请求加载InfoWindow的数据）。

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

为SELECT

要求一个有效的谷歌的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/

来源

2015-09-06 00:41:07

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

回答

相关问题