融合表层地图：加载时隐藏层 - 通过标记复选框按需显示答案

【问题标题】：fusion tables layers map: hide layer on load - show on request by marking a checkbox融合表层地图：加载时隐藏层 - 通过标记复选框按需显示
【发布时间】：2012-02-05 18:15:37
【问题描述】：

我有两个融合表，它们作为图层添加到地图可视化中。

Layer1 是地点列表（单击时会出现一个信息框）
Layer2 是几个区域的地图（导入的 kml 多边形）。每个都根据天气预报进行着色（填充颜色）（即蓝色表示下雨的可能性很大；红色表示晴天......）

我想要的是：

加载时：仅显示第 1 层；第 2 层保持隐藏状态。
如果用户想要加载/查看 Layer2，他必须选中一个复选框。

我不知道该怎么做。即使有可能。

下面是我的代码。

提前致谢！

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

var layer;
var tableid = 1111;

var layer2;
var tableid2 = 2222;

function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(10, 10),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});

layer = new google.maps.FusionTablesLayer(tableid);
layer.setQuery("SELECT 'geometry' FROM " + tableid);
layer.setMap(map);

layer2 = new google.maps.FusionTablesLayer(tableid2);
layer2.setQuery("SELECT 'coordenadas' FROM " + tableid2);
layer2.setMap(map); 
 }

function changeLayer(tableidselections) {

if (tableidselections == 1111){
     if (document.getElementById("avisos").checked == true) {
       if(layer.getMap() == null) { layer.setMap(map); }
     }

     if (document.getElementById("avisos").checked == false) {
         layer.setMap(null); 
     }

}

if (tableidselections == 2222){
     if (document.getElementById("eventos").checked == true) {
       if(layer2.getMap() == null) { layer2.setMap(map); }
     }

     if (document.getElementById("eventos").checked == false) {
         layer2.setMap(null);
     }
}

 }

 </script>

</head>
<body onload="initialize();">

<div id="selector_box">
  <table> 
        <tr><td> 
          <form id="selector_form" style="font-size:14px"> 
              <input type="checkbox" value="1111" name="selector" id="avisos" onclick="changeLayer(this.value);">Show weather info
              <!-- <input type="checkbox" value="2222" name="selector" id="eventos" onclick="changeLayer(this.value);">Eventos -->
          </form> 
        </td></tr>
  </table>
</div>

【问题讨论】：

标签： javascript google-maps google-fusion-tables

【解决方案1】：

是的，您可以这样做；您的代码似乎应该可以工作。只需跳过initialize方法中的layer2.setMap(map)，然后layer2默认不会加载。

如果您遇到问题，则可以将您的完整代码（带有实际表 ID）发布到 jsfiddle 或其他位置并说出问题所在。

【讨论】：

抱歉延迟回复。我必须做与我的实际工作相关的事情（我不是程序员！）。照你说的做，有效果。谢谢！