Комбинировать данные InfoWindow при наведении перекрывающихся полигонов?

Question

Можно ли объединить все данные полигона (описание &) в определенный момент в один InfoWindow при нажатии? У меня есть несколько перекрывающихся полигонов, и InfoWindow отображает только данные из самого верхнего. Кажется, это должно быть возможно, используя таблицы Fusion и прослушиватель кликов на карте, чтобы при щелчке на карте запрос отправлялся в таблицы Fusion, чтобы найти все полигоны, которые пересекаются с точкой, на которую была нажата (с использованием ST_INTERSECTS с CIRCLE и очень маленький радиус). Единственными столбцами в моей таблице Fusion являются Name, Description и Geometry (содержащие стандартный KML).

Это насколько я знаю. Отображаются полигоны, и круг отображается и центрируется на экране. InfoWindow отображает [объект 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/