一切就绪!

着手开发前,请先阅读我们的开发者文档

激活 Google Static Maps API

为帮助您起步,我们将引导您在 Google Developers Console 中先完成几项任务:

  1. 创建或选择项目
  2. 激活 Google Static Maps API
  3. 创建相应密钥
继续

样式化地图

使用 Google Static Maps API 时,通过应用您自己的样式可以自定义标准 Google 地图的显示。您可以更改特征的(例如道路、公园、建成区和其他景点)的视觉显示。更改它们的颜色或样式以强调特殊内容、补充页面上的周围内容,甚至完全隐藏特征。

示例

下面的示例显示了美国纽约布鲁克林区的一张地图,其中通过样式设置将本地道路显示为亮绿色,将居民区显示为黑色。这张地图还反转了标签的亮度,以便它们在深色背景中更为显眼。请注意,此工作示例采用网址编码:

https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=15&center=Brooklyn&style=feature:road.local%7Celement:geometry%7Ccolor:0x00ff00&style=feature:landscape%7Celement:geometry.fill%7Ccolor:0x000000&style=element:labels%7Cinvert_lightness:true&style=feature:road.arterial%7Celement:labels%7Cinvert_lightness:false&key=YOUR_API_KEY

下面的示例利用样式设置操作和简化来粗略呈现美国道路图的外观:

https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=12&center=Chicago&format=png&style=feature:road.highway%7Celement:geometry%7Cvisibility:simplified%7Ccolor:0xc280e9&style=feature:transit.line%7Cvisibility:simplified%7Ccolor:0xbababa&style=feature:road.highway%7Celement:labels.text.stroke%7Cvisibility:on%7Ccolor:0xb06eba&style=feature:road.highway%7Celement:labels.text.fill%7Cvisibility:on%7Ccolor:0xffffff&key=YOUR_API_KEY

样式语法

要创建一个自定义的样式化地图,请在请求网址中添加一个或多个 style 参数。

每个 style 声明都可能包含以下参数,使用管道字符(“|”)分隔:

  • feature(可选),表示选择进行此样式修改的特征。特征包括地图上的内容,例如道路、公园或其他景点。如果不提供 feature 参数,指定的样式将应用到所有特征。
  • element(可选),表示指定特征中选择进行此样式修改的元素。元素是特征的属性,例如几何形状或标签。如果不提供 element 参数,样式将应用到指定特征的所有元素。
  • 一组样式规则(强制),将应用到指定特征和元素。API 将按规则在 style 声明中出现的顺序应用相应规则。在 Google Static Maps API 的正常网址长度限制内,您可以添加任意数量的规则。

注:style 声明必须按规定顺序指定以上自变量。下面的示例为通过两个规则选择特征和元素提供了正确的语法:

style=feature:myFeatureArgument|element:myElementArgument|myRule1:myRule1Argument|myRule2:myRule2Argument

功能

下面的 style 声明将为地图上的所有道路设置颜色:

style=feature:road|color:0xffffff

下面是一些常用的特征选择:

  • feature:all(默认值)选择地图的所有特征。
  • feature:road 选择地图上的所有道路。
  • feature:road.local 选择所有本地道路。

特征(或特征类型)是地图上的几何特征,包括道路、公园、水体、商家等等。

特征组成类别树,以 all 为根。如果未指定特征,则会选择所有特征。指定 all 特征具有相同的效果。

某些特征包含您使用点分表示法指定的子特征。例如,landscape.naturalroad.local。如果仅指定父特征(例如 road),则您为父特征指定的所有样式均适用于其所有子特征(例如 road.localroad.highway)。

注意,父特征可能包含其所有子特征均不包含的某些元素。

这种结合实现了下列功能:

  • all(默认)选择所有特征。
  • administrative 选择所有行政区域。样式设置仅影响行政区域的标签,不影响地理边界或填充。
    • administrative.country 选择国家/地区。
    • administrative.land_parcel 选择地块。
    • administrative.locality 选择地区。
    • administrative.neighborhood 选择社区。
    • administrative.province 选择省份。
  • landscape 选择所有景观。
    • landscape.man_made 选择所有人文建筑。
    • landscape.natural 选择自然地貌特征。
    • landscape.natural.landcover 选择地表特征。
    • landscape.natural.terrain 选择地形特征。
  • poi 选择所有景点。
    • poi.attraction 选择旅游景点。
    • poi.business 选择商家。
    • poi.government 选择政府大楼。
    • poi.medical 选择应急服务,包括医院、药房、警察、医生和其他服务。
    • poi.park 选择公园。
    • poi.place_of_worship 选择宗教场所,包括教堂、寺庙、清真寺和其他场所。
    • poi.school 选择学校。
    • poi.sports_complex 选择体育馆。
  • road 选择所有道路。
    • road.arterial 选择公路干线。
    • road.highway 选择国道。
    • road.highway.controlled_access 选择进口控制国道。
    • road.local 选择地方道路。
  • transit 选择所有公交站和公交路线。
    • transit.line 选择公交路线。
    • transit.station 选择所有公交站。
    • transit.station.airport 选择机场。
    • transit.station.bus 选择公交车站。
    • transit.station.rail 选择火车站。
  • water 选择水体。

元素

下面的 style 声明将为所有当地道路的标签设置颜色:

style=feature:road.local|element:labels|color:0xffffff

元素是特征的细分。例如,在地图上,道路不仅包含图形线条(几何结构),还保护指示其名称的文本(标签)。

元素分为以下几种,但请注意,特定的特征可能不支持任何元素,也可能支持部分或全部元素:

  • all(默认)选择指定特征的所有元素。
  • geometry 选择指定特征的所有几何元素。
    • geometry.fill 只选择特征几何结构的填充区
    • geometry.stroke 只选择特征几何结构的描边
  • labels 选择与指定特征相关的文本标签。
    • labels.icon 只选择特征标签内显示的图标。
    • labels.text 只选择标签的文本。
    • labels.text.fill 只选择标签的填充区。标签的填充区通常渲染为标签文本周围的彩色轮廓。
    • labels.text.stroke 只选择标签文本的描边。

样式规则

样式规则是应用于每个 style 声明内指定的特征和元素的格式设置选项。

下面的 style 声明将向地图上的道路应用两个样式规则。第一个规则将向道路应用一种颜色。第二个规则将简化道路的显示,以便它们拥有更细的无轮廓线:

style=feature:road|color:0xffffff|visibility:simplified

每个 style 声明都必须包含一个或多个使用管道符号(“|”)分隔的操作。每个操作都使用冒号(“:”)字符指定其自变量值,所有操作都按其指定顺序应用于选定项。

支持以下样式选项:

  • hue(格式为 0xRRGGBB 的 RGB 十六进制字符串)表示基础颜色。

    注:此选项可以设置色调,同时保留默认的 Google 样式(或您在地图上定义的其他样式选项)中指定的饱和度和亮度。结果颜色是相对于基本地图的样式而言的。如果 Google 对基本地图样式做出任何更改,会影响使用 hue 设置样式的特征。如果可以,最好使用绝对 color 样式器。

  • lightness(一个介于 -100100 的浮点值)表示元素的亮度变化百分比。负值增加暗度(-100 指定黑色),正值增加亮度(+100 指定白色)。

    注:此选项可以设置亮度,同时保留默认的 Google 样式(或您在地图上定义的其他样式选项)中指定的饱和度和色调。结果颜色是相对于基本地图的样式而言的。如果 Google 对基本地图样式做出任何更改,会影响使用 lightness 设置样式的特征。如果可以,最好使用绝对 color 样式器。

  • saturation(一个介于 -100100 的浮点值)表示应用于元素的基础颜色强度变化百分比。

    注:此选项可以设置饱和度,同时保留默认的 Google 样式(或您在地图上定义的其他样式选项)中指定的色调和亮度。结果颜色是相对于基本地图的样式而言的。如果 Google 对基本地图样式做出任何更改,会影响使用 saturation 设置样式的特征。如果可以,最好使用绝对 color 样式器。

  • gamma(一个介于 0.0110.0 之间的浮点值,其中 1.0 不应用任何校正)表示对元素应用的伽马校正的大小。伽马矫正可以修改非线性方式中颜色的亮度,同时不会影响白色和黑色值。伽马矫正通常用于修改多个元素的对比度。例如,您可以通过修改伽马矫正值来增减元素边缘与内部之间的对比度。

    注:此选项可以使用伽马曲线调整与默认 Google 样式相对的亮度。如果 Google 对基本地图样式做出任何更改,会影响使用 gamma 设置样式的地图项。如果可以,最好使用绝对 color 样式器。

  • invert_lightness(如果为 true)能够反转现有的亮度。举例来说,可利用它快速切换到包含白色文本、亮度更低的地图。

    注:此选项只是反转默认的 Google 样式。如果 Google 对基本地图样式做出任何更改,会影响使用 invert_lightness 设置样式的特征。如果可以,最好使用绝对 color 样式器。

  • visibilityonoffsimplified)表示元素是否以及如何出现在地图上。simplified 可见性会从受影响的特征中删除某些样式特征;例如,道路将会简化为更细的无轮廓线,而公园将失去标签文本但保留标签图标。
  • color(格式为 0xRRGGBB 的 RGB 十六进制字符串)设置特征的颜色。
  • weight(大于或等于零的整型值)设置特征的粗细(单位:像素)。设置较高的粗细值可能导致附近图块边界被裁剪。

样式规则按照您指定的顺序应用。请勿将多个操作整合为一个样式操作。正确做法是,在样式组中将每个操作定义为单独的条目。

注:顺序很重要,因为某些操作是不可交换的。通过样式操作修改的特征和/或元素(通常)拥有现有样式;操作将作用于这些现有样式(若存在)。

色调、饱和度和亮度模型

样式化地图使用色调、饱和度、亮度 (HSL) 模型在样式器操作内表示颜色。色调表示基础颜色,饱和度表示该颜色的强度,亮度表示组成颜色中白色或黑色的相对数量。

伽马矫正会修改色彩空间的亮度,一般会增加或降低对比度。此外,HSL 模型还定义了坐标空间内的颜色,其中 hue 表示色轮内的朝向、而 saturation 和 lightness 则表示沿不同轴的振幅。色调在一个 RGB 色彩空间内测量,该空间与大多数 RGB 色彩空间类似,不同的是缺少白色和黑色阴影。

色调、饱和度和亮度模型

尽管 hue 采用 HTML 十六进制颜色值,但它仅使用该值来确定基础颜色(其在色轮范围内的朝向)而非其饱和度或亮度,后者以百分比变化形式单独指定。

例如,您可以将纯绿色色调定义为 hue:0x00ff00hue:0x000100。两个色调相同。两个值都指向 HSL 颜色模型中的纯绿色。

一个 RGB 色轮

包含等量红色、绿色和蓝色的 RGB hue 值不表示任何色调,因为其中没有任何值表示 HSL 坐标空间的朝向。例如,”#000000“(黑色)、”#FFFFFF“(白色)和所有纯灰色阴影。如需表示黑色、白色或灰色,您必须删除所有 saturation(将值设置为 -100),并改为调整 lightness

此外,在修改已有配色方案的现有特征时,更改 hue 等值并不会改变其现有 saturationlightness

发送以下问题的反馈:

此网页
Google Static Maps API
需要帮助?请访问我们的支持页面