图层未被移除 - Google地图 [英] Layer not getting removed - Google Maps
本文介绍了图层未被移除 - Google地图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有Google Maps：
<！DOCTYPE html>
< html>
< head>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no>
< meta charset =utf-8>
< title> Fusion Tables图层< / title>
< style>
html，body {
height：100％;
保证金：0;
padding：0;
}
#map {
height：100％;
}
< / style>
< / head>
< body>
< div id =map>< / div>
< script>
函数initMap（）{
var map = new google.maps.Map（document.getElementById（'map'），{
zoom：4，
center：{lat： 39.8282，lng：-98.5795}
}）;
google.maps.event.addListener（map，'zoom_changed'，function（）{
var zoom_level = map.getZoom（）;
var layer;
（zoom_level> = 5&& zoom_level< 7）{
layer = new google.maps.FusionTablesLayer（{
查询：{
select：'\'geometry \''，
from：'17aT9Ud-YnGiXdXEJUyycH2ocUqreOeKGbzCkUw'
}，
styles：[{
polygonOptions：{
fillColor：'＃000000'，
fillOpacity：0.001
}
}]
}）;
layer.setMap（map）;
}
//县级
if（zoom_level> = 7）{
layer = null;
layer.setMap（null）;
layer1 = new google.maps.FusionTablesLayer（{
查询：{
select：'\'geometry \''，
from：'1xdysxZ94uUFIit9eXmnw1fYc6VcQiXhceFd_CVKa'
}，
styles：[{
polygonOptions： {
fillColor：'＃000000'，
fillOpacity：0.001
}
}]
}）;
layer1.setMap（map）;
}
}）;
}
< / script>
< script async defer
src =https://maps.googleapis.com/maps/api/js?key=AIzaSyBMtoh9P3UkoxbXndKu_HOP7KsVwTRvxGU&callback=initMap>
< / script>
< / body>
< / html>
当我放大缩放级别7和更高级别时，我仍然可以看到状态级别（层）而不是layer1 。如何在放大时重置图层？
解决方案
我会建议如果您只想要一层图层，创建一个，在创建新版本之前隐藏它。
google.maps.event.addListener（map，'zoom_changed'，function （）{
var zoom_level = map.getZoom（）;
if（layer）layer.setMap（null）;
//状态级别
if（zoom_level> = 5 && zoom_level< 7）{
layer = new google.maps.FusionTablesLayer（{
query：{
select：'\'geometry \''，
from：'17aT9Ud-YnGiXdXEJUyycH2ocUqreOeKGbzCkUw'
}，
styles：[{
polygonOptions：{
fillColor：'＃000000'，
fillOpacity：0.001 $ b $ （b）如果（zoom_level> = 7）b
$ b $ ）{
layer = new google.maps.FusionTablesLayer（{
quer y：{
select：'\'geometry \''，
from：'1xdysxZ94uUFIit9eXmnw1fYc6VcQiXhceFd_CVKa'
}，
styles：[{
polygonOptions：{
fillColor：'＃000000'，
fillOpacity：0.001
}
}]
}）;
layer.setMap（map）;
}
}）;
代码段：
var layer; var layer1; var map;函数initMap（）{map = new google.maps.Map（document.getElementById（'map '），{zoom：4，center：{lat：39.8282，lng：-98.5795}}）; google.maps.event.addListener（map，'zoom_changed'，function（）{var zoom_level = map.getZoom（）; if（layer）layer.setMap（null）; //状态级别if（zoom_level> = 5& amp ;& zoom_level< 7）{layer = new google.maps.FusionTablesLayer（{query：{select：'\'geometry \''，from：'17aT9Ud-YnGiXdXEJUyycH2ocUqreOeKGbzCkUw'}，styles：[{polygonOptions：{ fillColor：'＃000000'，fillOpacity：0.001}}]}）; layer.setMap（map）;} //县级别if（zoom_level> = 7）{layer = new google.maps.FusionTablesLayer（{query：{选择：'\'geometry\''，from：'1xdysxZ94uUFIit9eXmnw1fYc6VcQiXhceFd_CVKa'}，styles：[{polygonOptions：{fillColor：'＃000000'，fillOpacity：0.001}}）}）; layer.setMap（map）;} }）;} google.maps.event。 addDomListener（window，load，initMap）;
html ，身体{身高：100％;保证金：0; padding：0;}＃map {height：100％;}
< script src =https://maps.googleapis.com/maps/api/js>< / script>< div id =map>< / div>
I have Google Maps:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Fusion Tables layers</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: 39.8282, lng: -98.5795}
});
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoom_level = map.getZoom();
var layer;
var layer1;
//state level
if(zoom_level >= 5 && zoom_level < 7) {
layer = new google.maps.FusionTablesLayer({
query: {
select: '\'geometry\'',
from: '17aT9Ud-YnGiXdXEJUyycH2ocUqreOeKGbzCkUw'
},
styles: [{
polygonOptions: {
fillColor: '#000000',
fillOpacity: 0.001
}
}]
});
layer.setMap(map);
}
//county level
if(zoom_level >= 7) {
layer = null;
layer.setMap(null);
layer1 = new google.maps.FusionTablesLayer({
query: {
select: '\'geometry\'',
from: '1xdysxZ94uUFIit9eXmnw1fYc6VcQiXhceFd_CVKa'
},
styles: [{
polygonOptions: {
fillColor: '#000000',
fillOpacity: 0.001
}
}]
});
layer1.setMap(map);
}
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBMtoh9P3UkoxbXndKu_HOP7KsVwTRvxGU&callback=initMap">
</script>
</body>
</html>
When I zoom in to zoomlevel 7 and above, I still see state level (layer) and not layer1. How can I reset layer when zoom in?
解决方案
I would suggest that if you only ever want one layer at a time, only create one, hide it before creating a new version.
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoom_level = map.getZoom();
if (layer) layer.setMap(null);
//state level
if (zoom_level >= 5 && zoom_level < 7) {
layer = new google.maps.FusionTablesLayer({
query: {
select: '\'geometry\'',
from: '17aT9Ud-YnGiXdXEJUyycH2ocUqreOeKGbzCkUw'
},
styles: [{
polygonOptions: {
fillColor: '#000000',
fillOpacity: 0.001
}
}]
});
layer.setMap(map);
}
//county level
if (zoom_level >= 7) {
layer = new google.maps.FusionTablesLayer({
query: {
select: '\'geometry\'',
from: '1xdysxZ94uUFIit9eXmnw1fYc6VcQiXhceFd_CVKa'
},
styles: [{
polygonOptions: {
fillColor: '#000000',
fillOpacity: 0.001
}
}]
});
layer.setMap(map);
}
});
code snippet:
var layer;
var layer1;
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {
lat: 39.8282,
lng: -98.5795
}
});
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoom_level = map.getZoom();
if (layer) layer.setMap(null);
//state level
if (zoom_level >= 5 && zoom_level < 7) {
layer = new google.maps.FusionTablesLayer({
query: {
select: '\'geometry\'',
from: '17aT9Ud-YnGiXdXEJUyycH2ocUqreOeKGbzCkUw'
},
styles: [{
polygonOptions: {
fillColor: '#000000',
fillOpacity: 0.001
}
}]
});
layer.setMap(map);
}
//county level
if (zoom_level >= 7) {
layer = new google.maps.FusionTablesLayer({
query: {
select: '\'geometry\'',
from: '1xdysxZ94uUFIit9eXmnw1fYc6VcQiXhceFd_CVKa'
},
styles: [{
polygonOptions: {
fillColor: '#000000',
fillOpacity: 0.001
}
}]
});
layer.setMap(map);
}
});
}
google.maps.event.addDomListener(window, "load", initMap);
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
这篇关于图层未被移除 - Google地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
