使用下拉菜单层为 Fusion Table 自定义 InfoWindow答案

【问题标题】：Customize InfoWindow for a Fusion Table with drop down menu layers使用下拉菜单层为 Fusion Table 自定义 InfoWindow
【发布时间】：2013-08-13 18:39:58
【问题描述】：

我创建了一个 FusionTables 分层地图，我在其中交换了 tableId，因此基于从下拉菜单中的选择来交换可见地图标记。做出选择后，我无法为每个图层自定义 infoWindow 属性。在浏览了几个参考页面和教程之后，我尝试对 infoWindow 进行样式化，并且我也尝试实现 infoBox 选项但未成功。（我在 FusionTables 工作区中对 infoWindow 进行了样式化，但这些样式不会导入。）到目前为止，我已经附上了我的代码；有没有人有任何建议我可能会尝试a.) 自定义窗口内容（选择在窗口中显示哪些 FusionTable 列和后续数据，以及 b.) 对窗口本身进行样式化？

感谢任何帮助 - 谢谢。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

<meta charset="UTF-8">

<title>Layered Map</title>

<link href="/apis/fusiontables/docs/samples/style/default.css"

rel="stylesheet" type="text/css">

<style>

#map-canvas { width:1250px; height:600px; }

.layer-wizard-search-label { font-family: sans-serif };

</style>



<script type="text/javascript"src="http://maps.google.com/maps/api/js?sensor=false">

</script>

<script src="/path/to/infobox.js" type="text/javascript"></script>

<script type="text/javascript">

var map = null;

function initialize() {

    var tableId = '1JEUbXBVguPhTwEPncLV0GkF49Tp3ImCooKGGADQ';

    var locationColumn = 'Lat/Long';



    map = new google.maps.Map(document.getElementById('map-canvas'), {

        center: new google.maps.LatLng(40, 265),

        zoom: 4,


        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoomControlOptions: {
        style: google.maps.ZoomControlStyle.SMALL
      },

  });



    var layer = new google.maps.FusionTablesLayer({

        query: {

        select: locationColumn,

        from: tableId

  }

});



    google.maps.event.addDomListener(document.getElementById('option'),

        'change', function() {

         updateMap(layer, tableId, locationColumn);

});

}



function updateMap(layer, tableId, locationColumn) {

var option = document.getElementById('option').value;

if (option) {

switch(option){

  case "2": tableId = '1io74LWVjfOc_MDtoMlnPc3EiLg_uYYrdImQs43w';

            break;

  case "3": tableId = '1LbTKT2JJ86I9smoa7Xrryo7mRLeC78Tiop9j7x0';

            break;

  default:

  case "1": tableId = '1JEUbXBVguPhTwEPncLV0GkF49Tp3ImCooKGGADQ'; // first tableId

            break;

}

layer.setOptions({

      query: {

         select: locationColumn,

         from: tableId,

       },

       map: map,
        styleId: 2,
        templateId: 2,

  });

 } else {

layer.setMap(null);

 }

}





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







</script>



</head>

<body>



<div id="map-canvas"></div>

<label>Layer:</label>

<select id="option">

<option selected>--Select--</option>

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

 </select>

</body>

</html>

【问题讨论】：

要让FusionTable使用格式化的infowindows，需要通过appropriate templateId and styleId into the FusionTable constuctor
Example of 3 FusionTableLayers on a map, sharing a single infowindow
太棒了，我已经编辑了我的代码并添加了“，styleId：2，templateId：2”，现在它正在根据要求为前两层添加样式，而不是第三层？跨度>
可能是使用了不同的 temlateId 或 styleId？
有道理。不知道怎么单独申报？

标签： javascript google-fusion-tables

【解决方案1】：

添加styleId和templateId换表功能，并修复相应的：

switch(option){
  case "2": tableId = '1io74LWVjfOc_MDtoMlnPc3EiLg_uYYrdImQs43w';
            var templateId =2;
            var styleId =2;
            break;
  case "3": tableId = '1LbTKT2JJ86I9smoa7Xrryo7mRLeC78Tiop9j7x0';
            var templateId =2;
            var styleId =3;
            break;
  default:
  case "1": tableId = '1JEUbXBVguPhTwEPncLV0GkF49Tp3ImCooKGGADQ'; // first tableId
            var templateId =2;
            var styleId =2;
            break;
}

layer.setOptions({
      query: {
         select: locationColumn,
         from: tableId,
       },
       map: map,
        styleId: styleId,
        templateId: templateId,
});

【讨论】：