在信息窗口中添加标签(API Google地图,谷歌的融合表 - 汇入KML)(Adding Tab

2019-08-16 21:21发布

我觉得我越来越接近,但失去了一些东西。 我的源(多边形)数据融合表,我想创建一个2标签信息窗口,并调用从表中的数据进去。 看到一堆例子(见: https://fusion-tables-users-group.googlegroups.com/attach/ec0975e69edcfb96/infowindow_tabs_5.html?pli=1&view=1&part=4一个),所以我希望这是可行的...

我的代码(从初始化函数)如下。 现在,我想专门查询从外地“ROOF_TOTAL”的值(使用e.row)投入标签1(初始测试目的)。

    function initialize() {
// set the geocoder variable equal to the instance of the google maps geocoder object
    geocoder = new google.maps.Geocoder();
//declare variables for map set up 
    map  = new google.maps.Map (document.getElementById('hatfield_map'), {
      center: new google.maps.LatLng(42.37098, -72.59818),
      zoom: 17,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
// Set up a styles array to fill in color for the different polygon types based on the query
// of the value 'TYPE' in the FusionTable...        
    var layer = new google.maps.FusionTablesLayer({
          query:{
            select: 'geometry',
            from: 'TABLE-ID'
          },
//            suppressInfoWindows: true
// Set up the stroke color and opacity of all polygons...
          styles: [{
            polygonOptions: {
               strokeColor: '#00ffff',
               strokeOpacity: .4,
               strokeWeight: .5
            }]
    suppressInfoWindows: true
        });
    var infowindow = new google.maps.InfoWindow({
    });
// create a custom infowindow, Add a click listener that creates a new infowindow
    google.maps.event.addListener(layer, "click", function(e) {
         '<ul style="font-size:12px;">' +
         '<li><a href="#tab-1"><span>Potential Power Capacity</span>      
</a></li>' +
         '<li><a href="#tab-2"><span>Two</span></a></li>' + 
     '</ul>' +
         '<div id="tab-1">' +
         '<p>' + e.row['TOTAL_ROOF'].value + "  "+ '</p>' +
         '</div>';
         infowindow.setContent(contentString);
         infowindow.setPosition(e.latLng);
//Infowindow-opening event handler
         infowindow.open(map);
         $(".tabs").tabs();
       });
    layer.setMap(map);
}
文章来源: Adding Tabs in infowindows (googlemaps api, google fusion tables - kml import)