示例中心
功能在线体验
控制台

高德 开发 地图 JS API 开发指南 创建地图 个性化展示

更新时间:2017年09月06日

使用自定义地图

高德地图开放平台的开发者在取得开发者账号后,可以进入开发者控制台,在地图自定义平台进行完全自主的自定义地图样式的创建、编辑、发布以及删除操作,发布并取得地图样式ID后,可以使用JavaScript API的mapStyle接口,把编辑好的样式加载到自己的Web地图中,具体的使用示例如下:

<script type="text/javascript" src = 'http://webapi.amap.com/maps?v=1.4.0&key=您的JS API开发者Key'></script>
<script type="text/javascript">
      var map = new AMap.Map('mapDiv', {
         mapStyle: 'amap://styles/地图样式ID'//样式URL
     });
</script>

也可以在地图创建之后使用Map对象的setMapStyle方法进行地图样式的变更:

  map.setMapStyle('amap://styles/地图样式ID');

查看示例

请注意,地图样式ID和开发者Key必须同属于一个开发者账号,样式的发布生效需要1分钟时间。

使用标准样式模版

同时,对于自定义平台中作为模版的几个官方样式,开发这也可以直接使用,使用方法如下:

 var map = new AMap.Map('mapDiv', {
         mapStyle: 'amap://styles/模版样式的英文名'//样式URL
 });
//map.setMapStyle('amap://styles/模版样式的英文名');

目前,JSAPI可以使用的官方模版样式有11种,分别是:

官方地图样式模版

英文名称

名称

样式URL

normal

标准

amap://styles/normal

whitesmoke

远山黛

amap://styles/whitesmoke

macaron

马卡龙

amap://styles/macaron

graffiti

涂鸦

amap://styles/graffiti

darkblue

极夜蓝

amap://styles/darkblue

blue

靛青蓝

amap://styles/blue

fresh

草色青

amap://styles/fresh

dark

幻影黑

amap://styles/dark

light

月光银

amap://styles/light

grey

雅士灰

amap://styles/grey

查看示例

设置地图的显示内容

高德地图JavaSctipt API支持显示部分底图的构成元素类,创建特定需求下与众不同的地图,如通过隐藏某类地图元素,突出展示自己的数据。调用代码:

map.setFeatures("road");//单一种类要素显示
map.setFeatures(['road','point'])//多个种类要素显示

目前支持以下四种地图要素的选择性显示:

地图元素类型列表

名称

说明

bg

地图背景

point

兴趣点

road

道路

building

建筑物

查看示例

移动端
示例中心
功能
在线体验
常见问题