谷歌地图v3如何隐藏元素（道路、路标等）

Question

谷歌地图v3如何隐藏元素（道路、路标等）

25

我在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" }
    ]
  }
]

我应该能在我的地图中使用它，但有人能告诉我如何使用这段代码吗？在Google Maps V3的API中找不到任何相关信息。

- Rene Terstegen

我在页面上真的看不到太多内容，它似乎正在使用不同的底图，如道路、卫星等。他们确实会根据已详细说明的样式选项进行操作。 - Drew

在这里 https://developers.google.com/maps/documentation/javascript/styling - BigJ

3个回答

9

我知道这篇文章已经有五年的历史了，但是我偶然发现了它，认为接受的解决方案比实际需要的要复杂得多。根据原帖中的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);

- user736893

0

你链接的页面包含一个链接，指向此功能的Google Maps API文档。

- ceejayoz

1

好的，错过了链接。就像我的女朋友说的那样：我是一个好的搜索者，但是找东西不太行！ - Rene Terstegen

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Daniel Vassallo · Accepted Answer

正如@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

您可能还想查看Google Maps API样式向导，它将允许您以图形方式编辑样式。