切换图层谷歌地图 API 不起作用

我正在尝试使用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>

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

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

自：

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

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

概念验证小提琴

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

<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>

相关内容

最新更新

热门标签：