Javascript Google Maps v3 隐藏元素（道路、路标等）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4024672/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Maps v3 hide elements (roads, roadsigns, etc)
提问by Rene Terstegen
I found a code snippet on http://www.41latitude.com/post/1268734799/google-styled-maps:
我在http://www.41latitude.com/post/1268734799/google-styled-maps上找到了一段代码：
[
{
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" }
]
}
]
I should be able to use it in my maps, but is there somebody who can tell me how I can use this snippet? I can't find anything about it in the API of Google Maps V3.
我应该能够在我的地图中使用它，但是有人可以告诉我如何使用这个片段吗？我在 Google Maps V3 的 API 中找不到任何关于它的信息。
回答by Daniel Vassallo
As @ceejayoz suggested in the other answer, you are trying to use the new Styled Map featuresof the v3 Maps API. Here's a very basic example of how you could use the above style in a simple map:
作为@ceejayoz在对方的回答表明，你正在尝试使用新的样式地图功能的的第3个Maps API。这是一个非常基本的示例，说明如何在简单的地图中使用上述样式：
<!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>
Screenshot:
截屏：
You may also want to check out the Google Maps APIs Styling Wizardwhich will allow you to graphically edit styles.
您可能还想查看Google Maps API 样式向导，它允许您以图形方式编辑样式。
回答by Devil's Advocate
I know this is 5 years old, but I stumbled across this and the accepted solution is much more complex than needed in my opinion. Given the JSON in the original post, this is how you would apply the style to an existing map:
我知道这已经有 5 年的历史了，但我偶然发现了这一点，在我看来，公认的解决方案比需要的要复杂得多。鉴于原始帖子中的 JSON，您可以通过以下方式将样式应用于现有地图：
var mapStyle = [
{
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" }
]
}
]
//create map
var map = new google.maps.Map(...); //This assumes you already have a working map
//set style
map.set('styles', mapStyle);
回答by ceejayoz
The page you linked to includes a link to the Google Maps API documentation for this feature.
您链接到的页面包含指向此功能的 Google Maps API 文档的链接。
