隐藏 Google Maps API v3 中的所有建筑物

Question

我有一个自定义样式的谷歌地图。

\n\n

我想隐藏所有显示的建筑物或设置其样式。\n在此查看（包含建筑物）

\n\n

查看文档，似乎没有办法隐藏建筑物，事实上，似乎根本没有任何建筑物（政府建筑物除外）的参考。

\n\n

是否可以隐藏这些 \xe2\x80\x93 & 如果可以，如何隐藏？

\n\n

这是地图代码：

\n\n

<script src="http://maps.google.com/maps/api/js?sensor=false" \ntype="text/javascript"></script>\n\n<div id="map"></div> \n\n<script type="text/javascript">\n\nvar address = \'Bowie, MD\';\n\nvar styles = [\n{\nfeatureType: \'landscape\',\nelementType: \'all\',\nstylers: [\n{ hue: \'#33548f\' },\n{ saturation: 28 },\n{ lightness: -57 },\n{ visibility: \'simplified\' }\n]\n},{\nfeatureType: \'road.local\',\nelementType: \'all\',\nstylers: [\n{ "visibility": "simplified" },\n{ "color": "#366b97" }\n]\n},{\nfeatureType: \'poi\',\nelementType: \'all\',\nstylers: [\n{ hue: \'#33548f\' },\n{ saturation: 8 },\n{ lightness: -51 },\n{ visibility: \'off\' }\n]\n},{\nfeatureType: \'road.highway\',\nelementType: \'all\',\nstylers: [\n{ hue: \'#233961\' },\n{ saturation: -53 },\n{ lightness: -60 },\n{ visibility: \'on\' }\n]\n},{\nfeatureType: \'water\',\nelementType: \'all\',\nstylers: [\n{ hue: \'#2a4576\' },\n{ saturation: 5 },\n{ lightness: -59 },\n{ visibility: \'simplified\' }\n]\n},{\nfeatureType: \'administrative\',\nelementType: \'all\',\nstylers: [\n{ hue: \'#333333\' },\n{ saturation: 0 },\n{ lightness: -61 },\n{ visibility: \'off\' }\n]\n},{\nfeatureType: \'administrative\',\nelementType: \'all\',\nstylers: [\n{ hue: \'#333333\' },\n{ saturation: 0 },\n{ lightness: -61 },\n{ visibility: \'off\' }\n]\n},{\nfeatureType: \'road.arterial\',\nelementType: \'all\',\nstylers: [\n{ hue: \'#2c487b\' },\n{ saturation: -53 },\n{ lightness: -57 },\n{ visibility: \'on\' }\n]\n}\n];\nvar options = {\nmapTypeControlOptions: {\nmapTypeIds: [ \'Styled\']\n},\ncenter: new google.maps.LatLng(38.956318403646755, -76.72218313217161),\nzoom: 16,\nmapTypeId: \'Styled\',\npanControl: false,\nzoomControl: true,\nzoomControlOptions: {\nstyle: google.maps.ZoomControlStyle.LARGE,\nposition: google.maps.ControlPosition.RIGHT_TOP\n},\nmapTypeControl: false,              \nscaleControl: false,\n};\nvar div = document.getElementById(\'map\');\nvar map = new google.maps.Map(div, options);\nvar styledMapType = new google.maps.StyledMapType(styles, { name: \'Styled\' });\nmap.mapTypes.set(\'Styled\', styledMapType);\n\nvar geocoder = new google.maps.Geocoder();\n\ngeocoder.geocode({\n\'address\': address\n}, \nfunction(results, status) {\nif(status == google.maps.GeocoderStatus.OK) {\nnew google.maps.Marker({\nposition: results[0].geometry.location,\nmap: map\n});\nmap.setCenter(results[0].geometry.location);\n}\nelse {\n// Google couldn\'t geocode this request. Handle appropriately.\n}\n});\n\n</script>   \n

\n

Answer 1

要隐藏建筑物，您需要"visibility": "simplified"在添加任何特定样式之前进行全局设置。

然后，您可以返回并将可见性设置为“打开”，并为每个元素添加其他样式。

看起来 API 应该有一种控制建筑物的方法，但目前似乎还没有。到那时为止，这一切都必须有效。

例如：

var styles = [
      {
        "stylers": [
          { "visibility": "simplified" },
          { "saturation": -100 }
        ]
      },{
        "featureType": "road.local",
        "elementType": "labels.text",
        "stylers": [
          { "visibility": "on" }
        ]
      },{
        "featureType": "road.highway",
        "elementType": "labels.text",
        "stylers": [
          { "visibility": "on" }
        ]
      },{
        "featureType": "road.arterial",
        "stylers": [
          { "visibility": "on" }
        ]
      },{
        "featureType": "poi",
        "stylers": [
          { "visibility": "on" },
          { "lightness": 25 }
        ]
      },{
        "featureType": "poi",
        "stylers": [
          { "lightness": 1 }
        ]
      }
    ]