Javascript 仅打开一种地图类型的Google Fusion Table/删除某些地图类型的Google Fusion Table_Javascript_Html_Google Maps_Google Maps Api 3_Google Fusion Tables

Javascript 仅打开一种地图类型的Google Fusion Table/删除某些地图类型的Google Fusion Table

javascript html google-maps google-maps-api-3

Javascript 仅打开一种地图类型的Google Fusion Table/删除某些地图类型的Google Fusion Table,javascript,html,google-maps,google-maps-api-3,google-fusion-tables,Javascript,Html,Google Maps,Google Maps Api 3,Google Fusion Tables,我正在尝试使用GoogleMapsJavaScriptAPI制作一个web地图。我希望波士顿的Google Fusion建筑物表只出现在我称之为“建筑物”的样式化地图上。当我点击建筑物地图类型时，建筑物层就会出现。然后，当我点击道路和卫星地图时，建筑层就消失了。但是，如果我先单击“道路”或“卫星”地图类型，然后单击“建筑物”地图类型，则不会加载“建筑物”图层。我不明白为什么。谢谢 <!DOCTYPE html> <html> <head> <h3 ali

我正在尝试使用GoogleMapsJavaScriptAPI制作一个web地图。我希望波士顿的Google Fusion建筑物表只出现在我称之为“建筑物”的样式化地图上。当我点击建筑物地图类型时，建筑物层就会出现。然后，当我点击道路和卫星地图时，建筑层就消失了。但是，如果我先单击“道路”或“卫星”地图类型，然后单击“建筑物”地图类型，则不会加载“建筑物”图层。我不明白为什么。谢谢

<!DOCTYPE html>
<html>
<head>
<h3 align="center">Boston, MA</h3>
<title>Massachusetts, USA</title>
<meta name="Running Destinations" content="initial-scale=1.0, user-scalable=no">
<meta name="author" content="CodingGrandma">
<meta charset="utf-8">
<style>
    /* formatting for html containing the map */
    body {background-color: White;}
    h3 {color: Black;}
    /* formatting for map */
  #map {
    height: 75%;
  }
  html, body {
    height: 100%;
    margin: 1;
    padding: 0;
  }
    </style>
  </head>
  <body>
    1 foot<input type="radio" name="Storm Surge" value="1 foot" id="1_ft_surge"/><br/>
    2 foot<input type="radio" name="Storm Surge" value="2 foot" id="2_ft_surge"/><br/>
<div id="map"></div>
<script>
var map;
var mapType;
var layer = new google.maps.FusionTablesLayer(null);
function initMap() {
    // Create Styled Map Object 
    var styledMapType = new google.maps.StyledMapType(
        [
{
    "featureType": "administrative",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "poi",
    "stylers": [
        {
            "visibility": "simplified"
        }
    ]
},
{
    "featureType": "road",
    "elementType": "labels",
    "stylers": [
        {
            "visibility": "simplified"
        }
    ]
},
{
    "featureType": "water",
    "stylers": [
        {
            "visibility": "simplified"
        }
    ]
},
{
    "featureType": "transit",
    "stylers": [
        {
            "visibility": "simplified"
        }
    ]
},
{
    "featureType": "landscape",
    "stylers": [
        {
            "visibility": "simplified"
        }
    ]
},
{
    "featureType": "road.highway",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "road.local",
    "stylers": [
        {
            "visibility": "on"
        }
    ]
},
{
    "featureType": "road.highway",
    "elementType": "geometry",
    "stylers": [
        {
            "visibility": "on"
        }
    ]
},
{
    "featureType": "water",
    "stylers": [
        {
            "color": "#84afa3"
        },
        {
            "lightness": 52
        }
    ]
},
{
    "stylers": [
        {
            "saturation": -17
        },
        {
            "gamma": 0.36
        }
    ]
},
{
    "featureType": "transit.line",
    "elementType": "geometry",
    "stylers": [
        {
            "color": "#3f518c"
        }
    ]
}
],
        //Remember to include name for map style you created
        {name: 'Buildings'});
      map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 42.340885, lng: -71.047289},
      zoom: 13,
      panControl:true,
      scaleControl:true,
      zoomControl:true,
      zoomControlOptions:{
        style: google.maps.ZoomControlStyle.LARGE},
      mapTypeControl: true,
      streetViewControl:true,
      overviewMapControl:true,
      rotateControl:true,
      zoomControlOptions:{
        style:google.maps.ZoomControlStyle.LARGE,
        position:google.maps.ControlPosition.RIGHT_CENTER
        },
      //add your style to MapTypeOptions below
      mapTypeControlOptions: {
        mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain',
                'styled_map']
      }
    });
    google.maps.event.addListener(map, 'maptypeid_changed', function() {
        mapType = map.getMapTypeId();
        AddBuildings()
    });
    map.mapTypes.set('styled_map',styledMapType);
  }
     function AddBuildings(){
if (mapType == "styled_map") {
         layer = new google.maps.FusionTablesLayer({
            query:{
            select: 'geometry',
            from: '1mzPT_gVGQRujbzIdPTzV8swo2AI611PEwIKwzgj7',
            }
        });
        layer.setMap(map);
    } else {
        layer.setMap(null);
  }
  }

</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBV-z3Aar9YGZXept2AXxLY_70TL317mPA&callback=initMap">
</script>


马萨诸塞州波士顿
美国马萨诸塞州
/*包含地图的html格式*/
正文{背景色：白色；}
h3{颜色：黑色；}
/*地图格式*/
#地图{
身高：75%；
}
html，正文{
身高：100%；
保证金：1；
填充：0；
}
1英尺

2英尺

var映射；
var映射类型；
var layer=new google.maps.FusionTablesLayer（null）；
函数initMap（）{
//创建样式化映射对象
var styledMapType=new google.maps.styledMapType(
[
{
“功能类型”：“管理”，
“造型师”：[
{
“可见性”：“关闭”
}
]
},
{
“featureType”：“poi”，
“造型师”：[
{
“可见性”：“简化”
}
]
},
{
“功能类型”：“道路”，
“elementType”：“标签”，
“造型师”：[
{
“可见性”：“简化”
}
]
},
{
“功能类型”：“水”，
“造型师”：[
{
“可见性”：“简化”
}
]
},
{
“featureType”：“transit”，
“造型师”：[
{
“可见性”：“简化”
}
]
},
{
“特色类型”：“景观”，
“造型师”：[
{
“可见性”：“简化”
}
]
},
{
“功能类型”：“道路.公路”，
“造型师”：[
{
“可见性”：“关闭”
}
]
},
{
“功能类型”：“road.local”，
“造型师”：[
{
“可见性”：“打开”
}
]
},
{
“功能类型”：“道路.公路”，
“elementType”：“几何体”，
“造型师”：[
{
“可见性”：“打开”
}
]
},
{
“功能类型”：“水”，
“造型师”：[
{
“颜色”：“84afa3”
},
{
“轻盈”：52
}
]
},
{
“造型师”：[
{
“饱和”：-17
},
{
“伽马”：0.36
}
]
},
{
“featureType”：“transit.line”，
“elementType”：“几何体”，
“造型师”：[
{
“颜色”：“3f518c”
}
]
}
],
//记住要包括您创建的地图样式的名称
{名称：'建筑物'}）；
map=new google.maps.map（document.getElementById（'map'）{
中心：{lat:42.340885，lng:-71.047289}，
缩放：13，
泛控制：对，
scaleControl：对，
动物控制：对，
ZoomControl选项：{
样式：google.maps.ZoomControlStyle.LARGE}，
mapTypeControl:true，
街景控制：对，
overviewMapControl:true，
旋转控制：对，
ZoomControl选项：{
样式：google.maps.ZoomControlStyle.LARGE，
位置：google.maps.ControlPosition.RIGHT\u CENTER
},
//将样式添加到下面的MapTypeOptions
mapTypeControlOptions：{
MapTypeId:[“路线图”、“卫星”、“混合”、“地形”，
“样式化地图”]
}
});
google.maps.event.addListener（映射'maptypeid_changed'，函数（）{
mapType=map.getMapTypeId（）；
AddBuildings（）
});
map.mapTypes.set（'styled_map'，styledMapType）；
}
功能（建筑物）{
if（mapType==“样式化的地图”）{
图层=新建google.maps.FusionTablesLayer({
查询：{
选择“几何体”，
发件人：“1mzPT_GVGQRUJBZIPTZV8SWO2AI611PEWIKWZGJ7”，
}
});
图层设置图（map）；
}否则{
layer.setMap（空）；
}
}

我在发布的代码中发现javascript错误：

```
未捕获引用错误：未定义google
```

未捕获类型错误：无法读取未定义的属性“setMap”

在加载Google Maps Javascript API v3之前，您不能使用它

移动

层的初始化

：

var layer = new google.maps.FusionTablesLayer(null);

在

initMap

函数中（如

map

和

mapType

），该函数在API完成加载并可用后运行

var layer;
function initMap() {
  layer = new google.maps.FusionTablesLayer(null);

代码片段：

var映射；
var映射类型；
var层；
函数initMap（）{
layer=new google.maps.FusionTablesLayer（空）；
//创建样式化映射对象
var styledMapType=new google.maps.styledMapType(
[{
“功能类型”：“管理”，
“造型师”：[{
“可见性”：“关闭”
}]
},
{
“featureType”：“poi”，
“造型师”：[{
“可见性”：“简化”
}]
},
{
“功能类型”：“道路”，
“elementType”：“标签”，
“造型师”：[{
“可见性”：“简化”
}]
},
{
“功能类型”：“水”，
“造型师”：[{
“可见性”：“简化”
}]
},
{
“featureType”：“transit”，
“造型师”：[{
“可见性”：“简化”
}]
},
{
“特色类型”：“景观”，
“造型师”：[{
“可见性”：“简化”
}]
},
{
“功能类型”：“道路.公路”，
“造型师”：[{
“可见性”：“关闭”
}]
},
{
“功能类型”：“road.local”，
“造型师”：[{
“可见性”：“打开”
}]
},
{
“功能类型”：“道路.公路”，
“elementType”：“几何体”，
“造型师”：[{
“可见性”：“打开”
}]
},
{
“功能类型”：“水”，
“造型师”：[{