2

我试图自己解决这个问题，包括查看[此处的层上的质量保证][1]，但我不明白为什么我的脚本不起作用。

我有 2 个显示为图层的 Fusion 表。我希望两个点击框在选中时打开/关闭图层。

请有人可以查看我的代码，看看他们是否能发现问题所在？我将不胜感激！:)

谢谢。

<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <h3>new vs old layers</h3>
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="http://maps.google.com/maps/api/js?key=AIzaSyDjB2uAt9B6cFcUiJAgANg63qNQtiF6v24&sensor=false"></script>
    <script type="text/javascript">
    function toggleLayer(this_layer){
      if(this_layer.getMap()) {
        this_layer.setMap(null)
      } else {
        this_layer.setMap(map);
      }
    }
    function initialize() {
      var map = new google.maps.Map(document.getElementById("map_canvas"), {
        center: new google.maps.LatLng(51.765, -1.384),
        zoom: 9,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });
      var layer1 = new google.maps.FusionTablesLayer({
        query: {
          select: 'col2',
          from:'1NxFkNmdXHOvvWNnaWscabdxUDQqDul1BpiINtHI'
        },
        map: map
      });
      var layer2 = new google.maps.FusionTablesLayer({
        query: {
          select: 'col2',
          from:'1aM37b7PzUg3nqF14L4GzDbSrUGAfWOuIGcbkV2c'
        },
        map: map
      });
    }
  </script></head>
  <body onload="initialize();">
    <div>
      <input type="checkbox" id="show_hide_layer1" checked onchange="toggleLayer(layer1)"/>
      <label> old boundaries </label>
      <input type="checkbox" id="show_hide_layer2" checked onchange="toggleLayer(layer2)"/>
      <label> new boundaries </label>
    </div>
    <div id="map_canvas" style="width:80%; height:80%"></div>
  </body>
</html>
4

1 回答 1

2

我收到一个 JavaScript 错误：

layer1 is undefined.

第一个问题是这些变量必须是全局变量才能在 HTML 事件处理程序中使用。

与您的地图变量相同。

工作示例

于 2012-11-08T14:27:17.327 回答