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

时间:2012-11-08 20:35:03

标签: google-maps google-maps-api-3

我有自定义风格的Google地图。

我想隐藏或样式展示所有建筑物。 Seen here (with buildings)

通过文件查看,似乎没有办法隐藏建筑物,事实上,根本没有任何建筑物(政府大楼除外)的参考。

是否可以隐藏这些 - &如果是这样,怎么样?

这是地图代码:

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

1 个答案:

答案 0 :(得分:0)

要隐藏建筑物,您需要在添加任何特定样式之前全局设置"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 }
        ]
      }
    ]