Question

我正在尝试使用Google maps API进行编码，以制作可以从融合表中切换图层的地图。我已经研究过这个网站并试过很多代码，但它仍然没有用。我不能切换图层，我也不知道为什么。我收到了许多错误消息，例如getMap undefined。我看到许多工作示例，但我自己的代码不起作用。

<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=myapikey&callback=initMap">
</script>
<script>
  // var layer1 = null;
  // var layer2 = null;
  // var layer3 = null;
  // var map = null;

  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 13.809, lng: 100.504},
      zoom: 7,
      gestureHandling: 'cooperative'
    });

    var layer1 = new google.maps.FusionTablesLayer({
      query: {
      select: '*',
      from: '1ps-56Oh_BU9ROLblH5pnRIwur0NwCj1CZZDcJfiv'
    },
    styles: [{
      polygonOptions: {
      fillColor: '#00FF00',
      fillOpacity: 0.3
      }
    }]
    });

    var layer2 = new google.maps.FusionTablesLayer({
      query: {
      select: '*',
      from: '1ZRJhrDJvOKY03txK1KOap725DCnvKcb-E1HSXFRz'
    },
    styles: [{
      polygonOptions: {
      fillColor: '#ff000',
      fillOpacity: 0.3
      }
    }]
    });

    var layer3 = new google.maps.FusionTablesLayer({
      query: {
      select: '*',
      from: '1nTTiRj1FDh-zuvtSuRWSWYbVU_izfkOB2ulN1MFM'
    },
    styles: [{
      polygonOptions: {
      fillColor: '#0000ff',
      fillOpacity: 0.3
      }
    }]
    });
  }

function toggleLayer(this_layer){
  if (this_layer.getMap()) {
      this_layer.setMap(null);
    } else {
      this_layer.setMap(map);
    }  
  }
</script>

这是html：

<body>
<div id="map"></div>
<section>
  <div>
    <h1>select layer</h1>
  </div>
  <div>
    <h2>xxxxxxx</h2>
    <input type="checkbox" name="show_hide_layer1" onchange="toggleLayer(layer1)"/>
    <label>province</label>
    <input type="checkbox" name="show_hide_layer2" onchange="toggleLayer(layer2)"/>
    <label>amphoe</label>
    <input type="checkbox" name="show_hide_layer3" onchange="toggleLayer(layer3)"/>
    <label>tambon</label>
  </div>
 </section>

Answer 1

您已注释掉代码工作所需的全局变量。改变这个;

// var layer1 = null;
// var layer2 = null;
// var layer3 = null;
// var map = null;

致：

var layer1 = null;
var layer2 = null;
var layer3 = null;
var map = null;

从var函数中定义的行前面删除initMap。

proof of concept fiddle

＆＃13;

html,
body,
#map {
  height: 90%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<div id="map"></div>
<section>
  <div>
    <h1>select layer</h1>
  </div>
  <div>
    <h2>xxxxxxx</h2>
    <input type="checkbox" name="show_hide_layer1" onchange="toggleLayer(layer1)" />
    <label>province</label>
    <input type="checkbox" name="show_hide_layer2" onchange="toggleLayer(layer2)" />
    <label>amphoe</label>
    <input type="checkbox" name="show_hide_layer3" onchange="toggleLayer(layer3)" />
    <label>tambon</label>
  </div>
</section>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
<script>
  var layer1 = null;
  var layer2 = null;
  var layer3 = null;
  var map = null;

  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {
        lat: 13.809,
        lng: 100.504
      },
      zoom: 7,
      gestureHandling: 'cooperative'
    });

    layer1 = new google.maps.FusionTablesLayer({
      query: {
        select: '*',
        from: '1ps-56Oh_BU9ROLblH5pnRIwur0NwCj1CZZDcJfiv'
      },
      styles: [{
        polygonOptions: {
          fillColor: '#00FF00',
          fillOpacity: 0.3
        }
      }]
    });

    layer2 = new google.maps.FusionTablesLayer({
      query: {
        select: '*',
        from: '1ZRJhrDJvOKY03txK1KOap725DCnvKcb-E1HSXFRz'
      },
      styles: [{
        polygonOptions: {
          fillColor: '#ff000',
          fillOpacity: 0.3
        }
      }]
    });

    layer3 = new google.maps.FusionTablesLayer({
      query: {
        select: '*',
        from: '1nTTiRj1FDh-zuvtSuRWSWYbVU_izfkOB2ulN1MFM'
      },
      styles: [{
        polygonOptions: {
          fillColor: '#0000ff',
          fillOpacity: 0.3
        }
      }]
    });
  }

  function toggleLayer(this_layer) {
    if (this_layer.getMap()) {
      this_layer.setMap(null);
    } else {
      this_layer.setMap(map);
    }
  }
</script>

＆＃13;

切换图层谷歌地图API无法正常工作

1 个答案: