zoukankan      html  css  js  c++  java
  • 创建 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');
    }
  • 相关阅读:
    源码安装mysql-5.7.13一周的冤枉路总结。满满的都是泪啊
    一键安装Apache服务脚本
    源码编译安装LAMP
    Vue侦听器 watch
    Vue计算属性 computed
    Vue表单的值绑定和修饰符
    js编码解码decodeURI(URIstring)与decodeURIComponent(URIstring)的区别
    常用的JS表单验证
    js正则表达式匹配手机号中间四位以及匹配姓名第一个字符,将其替换为*
    Vue按键修饰符,鼠标按钮修饰符
  • 原文地址:https://www.cnblogs.com/huaxingtianxia/p/5484438.html
Copyright © 2011-2022 走看看