Question

我创建了一个FusionTables分层地图，我根据下拉菜单中的选择交换了tableId，从而交换了可见的地图标记。完成选择后，我无法为每个图层自定义infoWindow属性。在浏览了几个参考页面和教程后，我试图对infoWindow进行样式化，我也试图实现infoBox选项。（我已经在FusionTables工作区中对infoWindow进行了样式化，但这些样式不会导入。）到目前为止，我已附加了我的代码;有没有人有任何建议我可能会尝试。）自定义窗口内容（选择哪些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>

Answer 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,
});

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

1 个答案: