代码之家 › 专栏 › 技术社区 › Rene Terstegen

谷歌地图v3隐藏元素(道路、路标等)

google-maps-api-3 google-maps javascript

Rene Terstegen · 技术社区 · 14 年前

我在上找到了一个代码片段 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" }
    ]
  }
]

我应该可以在地图上使用它,但是有人能告诉我如何使用这个片段吗?我在谷歌地图v3的API中找不到任何关于它的信息。

3 回复 | 直到 8 年前

Community CDub 7 年前

Styled Map features v3 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>

alt text

Google Maps APIs Styling Wizard

THE JOATMON 9 年前

我知道这是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);

ceejayoz 14 年前

链接到的网页包含指向的链接 the Google Maps API documentation for this feature .