创建 StyledMapType 地图样式

您可以通过创建 StyledMapType 并向构造函数传递特征和样式器信息,新建作为样式应用对象的地图类型。此方法不会影响默认地图类型的样式。

如需新建地图类型:

  1. 创建您的样式数组。请参阅“地图特征和样式器”中的相关说明。
  2. 新建一个 google.maps.StyledMapType 对象,向其传递样式数组以及新地图类型的名称。
  3. 创建您的地图对象,然后在地图选项的 mapTypeIds 数组内加入新地图类型的标识符(它是mapTypeControlOptions 对象的一个属性)。
  4. 将上一步骤中的标识符与新样式化地图关联。
  5. 将地图设置为使用新地图类型。
function initialize() {

  // Create an array of styles.
  var styles = [
    {
      stylers: [
        { hue: "#00ffe6" },
        { saturation: -20 }
      ]
    },{
      featureType: "road",
      elementType: "geometry",
      stylers: [
        { lightness: 100 },
        { visibility: "simplified" }
      ]
    },{
      featureType: "road",
      elementType: "labels",
      stylers: [
        { visibility: "off" }
      ]
    }
  ];

  // Create a new StyledMapType object, passing it the array of styles,
  // as well as the name to be displayed on the map type control.
  var styledMap = new google.maps.StyledMapType(styles,
    {name: "Styled Map"});

  // Create a map object, and include the MapTypeId to add
  // to the map type control.
  var mapOptions = {
    zoom: 11,
    center: new google.maps.LatLng(55.6468, 37.581),
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    }
  };
  var map = new google.maps.Map(document.getElementById('map'),
    mapOptions);

  //Associate the styled map with the MapTypeId and set it to display.
  map.mapTypes.set('map_style', styledMap);
  map.setMapTypeId('map_style');
}

 

posted @ 2016-05-12 09:28  华行天下  阅读(613)  评论(0编辑  收藏  举报