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

如需新建地图类型:

  1. 创建您的样式数组。请参阅“地图特征和样式器”中的相关说明。
  2. 新建一个 google.maps.StyledMapType 对象,向其传递样式数组以及新地图类型的名称。
  3. 创建您的地图对象,然后在地图选项的 mapTypeIds 数组内加入新地图类型的标识符(它是mapTypeControlOptions 对象的一个属性)。
  4. 将上一步骤中的标识符与新样式化地图关联。
  5. 将地图设置为使用新地图类型。
  1. function initialize() {
  2.  
  3.   // 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" }
          ]
        }
      ];
  4.  
  5.   // 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"});
  6.  
  7.   // 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);
  8.  
  9.   //Associate the styled map with the MapTypeId and set it to display.
      map.mapTypes.set('map_style', styledMap);
      map.setMapTypeId('map_style');
    }

创建 StyledMapType 地图样式的更多相关文章

  1. google maps js v3 api教程(1) -- 创建一个地图

    原文地址 google maps javascript官方文档:https://developers.google.com/maps/documentation/javascript/ 在创建地图之前 ...

  2. HTML5创建高德地图

    创建高德地图 功能真的很好很强大,有图有证据! 1.申请key值 去官网2.https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db ...

  3. 用HMS Core地图服务自定义地图样式,给你的应用制作专属个性化地图

    不同行业的开发者对地图样式的展示需求差异很大.例如,物流类应用希望地图样式简洁一些,重点突出城市分布和快递路径:AR游戏类应用中的地图色彩需要和游戏UI适配,做的更酷炫一些:景区导览应用中的地图样式要 ...

  4. OpenLayers 3 之 地图样式(ol.style)详解

    地图样式是由 style 类控制的,其包含了地图样式的方方面面,例如,填充色.图标样式.图片样式.规则图形样式.边界样式.文字样式等,样式一般针对矢量要素图层. 矢量图层样式可以事先写好,写成静态的, ...

  5. 转载-SharePoint 2010 WebPart与Google地图系列 一:创建显示地图的WebPart

    [原] SharePoint 2010 WebPart与Google地图系列 一:创建显示地图的WebPart 摘要: 作为信息化先驱的产品SharePoint 2010竟然对GIS相关技术支持如此有 ...

  6. [Swift通天遁地]一、超级工具-(10)使用地图视图MKMapView的相机功能实现创建三维地图

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  7. SharePoint 创建网站地图树视图及格式枚举截图

    SharePoint 创建网站地图树视图及格式枚举截图         SharePoint首页隐藏掉左側导航以后,假设要以树视图呈现站点地图也非常easy.         仅仅须要复制v4.mas ...

  8. [原] SharePoint 2010 WebPart与Google地图系列 一:创建显示地图的WebPart

    摘要: 作为信息化先驱的产品SharePoint 2010竟然对GIS相关技术支持如此有限,试问现在哪个企业没有大量的项目需要结合Google地图来进行开发,单纯地从Google Javascript ...

  9. 【Leafletjs】1.创建一个地图

    code: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <l ...

随机推荐

  1. [leetcode]Sum Root to Leaf Numbers @ Python

    原题地址:http://oj.leetcode.com/problems/sum-root-to-leaf-numbers/ 题意: Given a binary tree containing di ...

  2. 渐进结构—条件生成对抗网络(PSGAN)

    Full-body High-resolution Anime Generation with Progressive Structure-conditional Generative Adversa ...

  3. Android组件之BroadCast简单实践

    作为Android的四大组件之一,没有理由不介绍一下BroadCast,BroadCast中文简单翻译就是广播,前阵子浙江某大学的啦啦操,广场舞的大妈,其中大妈和学生从喇叭和音响上听到的声音就是事件源 ...

  4. EasyUI-datagrid-自动合并单元格

    1.目标 1.1表格初始化完成后,已经自动合并好需要合并的行: 1.2当点击字段排序后,重新进行合并: 2.实现 2.1 引入插件 /** * author ____′↘夏悸 * create dat ...

  5. C++设计模式实现--模板(Template)模式

    一. 问题 在面向对象系统的分析与设计过程中常常会遇到这样一种情况:对于某一个业务逻辑(算法实现)在不同的对象中有不同的细节实现,可是逻辑(算法)的框架(或通用的应用算法)是同样的.Template提 ...

  6. 查看centos当前版本

    # rpm -q centos-release centos-release-5-4.el5.centos.1

  7. Python编程-Office操作-操作Excel(上)

    首先,需要安装openpyxl库 http://openpyxl.readthedocs.org/en/default/ pyton 2.xpip install openpyxl python 3. ...

  8. 算法笔记_183:历届试题 九宫重排(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 问题描述 如下面第一个图的九宫格中,放着 1~8 的数字卡片,还有一个格子空着.与空格子相邻的格子中的卡片可以移动到空格中.经过若干次移动,可以形成 ...

  9. 修改ligerui 默认确认按钮

    $.extend($.ligerDefaults.DialogString, {ok: '取消单据'}); showDialogPay = $.ligerDialog.alert('正在支付中,请稍候 ...

  10. [Python]网络爬虫(九):百度贴吧的网络爬虫(v0.4)源码及解析

    转自:http://blog.csdn.net/pleasecallmewhy/article/details/8934726 百度贴吧的爬虫制作和糗百的爬虫制作原理基本相同,都是通过查看源码扣出关键 ...