我有自定义风格的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>
答案 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 }
]
}
]