google-maps - 在 Google Maps API v3 中隐藏所有建筑物

我有一个自定义样式的 Google map 。

我想隐藏或设计所有显示的建筑物。
Seen here (with buildings)

查看文档，似乎没有隐藏建筑物的方法，实际上，似乎根本没有提及建筑物(政府建筑物除外)。

是否可以隐藏这些 - 如果可以，如何隐藏？

这是 map 代码:

<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>

<div id="map"></div>

<script type="text/javascript">

var address = 'Bowie, MD';

var styles = [
{
featureType: 'landscape',
elementType: 'all',
stylers: [
{ hue: '#33548f' },
{ saturation: 28 },
{ lightness: -57 },
{ visibility: 'simplified' }
]
},{
featureType: 'road.local',
elementType: 'all',
stylers: [
{ "visibility": "simplified" },
{ "color": "#366b97" }
]
},{
featureType: 'poi',
elementType: 'all',
stylers: [
{ hue: '#33548f' },
{ saturation: 8 },
{ lightness: -51 },
{ visibility: 'off' }
]
},{
featureType: 'road.highway',
elementType: 'all',
stylers: [
{ hue: '#233961' },
{ saturation: -53 },
{ lightness: -60 },
{ visibility: 'on' }
]
},{
featureType: 'water',
elementType: 'all',
stylers: [
{ hue: '#2a4576' },
{ saturation: 5 },
{ lightness: -59 },
{ visibility: 'simplified' }
]
},{
featureType: 'administrative',
elementType: 'all',
stylers: [
{ hue: '#333333' },
{ saturation: 0 },
{ lightness: -61 },
{ visibility: 'off' }
]
},{
featureType: 'administrative',
elementType: 'all',
stylers: [
{ hue: '#333333' },
{ saturation: 0 },
{ lightness: -61 },
{ visibility: 'off' }
]
},{
featureType: 'road.arterial',
elementType: 'all',
stylers: [
{ hue: '#2c487b' },
{ saturation: -53 },
{ lightness: -57 },
{ visibility: 'on' }
]
}
];
var options = {
mapTypeControlOptions: {
mapTypeIds: [ 'Styled']
},
center: new google.maps.LatLng(38.956318403646755, -76.72218313217161),
zoom: 16,
mapTypeId: 'Styled',
panControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.RIGHT_TOP
},
mapTypeControl: false,
scaleControl: false,
};
var div = document.getElementById('map');
var map = new google.maps.Map(div, options);
var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
map.mapTypes.set('Styled', styledMapType);

var geocoder = new google.maps.Geocoder();

geocoder.geocode({
'address': address
},
function(results, status) {
if(status == google.maps.GeocoderStatus.OK) {
new google.maps.Marker({
position: results[0].geometry.location,
map: map
});
map.setCenter(results[0].geometry.location);
}
else {
// Google couldn't geocode this request. Handle appropriately.
}
});

</script>

最佳答案

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

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

似乎 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 }
        ]
      }
    ]

关于google-maps - 在 Google Maps API v3 中隐藏所有建筑物，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13297374/