正如@ceejayoz在其他答案中建议的那样, 您正在尝试使用v3 Maps API的新Styled Map features。以下是一个非常基本的示例,展示如何在简单地图中使用上述样式:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps Dark Water Style Demo</title>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 550px; height: 300px;"></div>
<script type="text/javascript">
var myStyle = [
{
featureType: "administrative",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "poi",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "water",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeControlOptions: {
mapTypeIds: ['mystyle', google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN]
},
center: new google.maps.LatLng(30, 0),
zoom: 3,
mapTypeId: 'mystyle'
});
map.mapTypes.set('mystyle', new google.maps.StyledMapType(myStyle, { name: 'My Style' }));
</script>
</body>
</html>
截图:
![alt text](https://istack.dev59.com/6TFLT.webp)
您可能还想查看Google Maps API样式向导,它将允许您以图形方式编辑样式。