0

我创建了一个 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>
4

1 回答 1

0

添加 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,
});
于 2013-08-13T20:57:01.947 回答