高德地图 JS API的自定义地图

高德地图 JS API的自定义地图

本章向您介绍如何设置底图样式,包括

  1. 使用官方地图样式
  2. 创建和使用自定义地图
  3. 设置地图的显示内容

使用官方地图样式

您可以使用官方提供的地图样式,对底图进行设置,可选样式如下图所示:

设置地图样式的方式有两种:

在地图初始化时设置:

JavaScript
var map = new AMap.Map('container',{
    mapStyle: 'amap://styles/whitesmoke', //设置地图的显示样式
});

地图创建之后使用Map对象的setMapStyle方法来修改:

JavaScript
var map = new AMap.Map('container',{
    zoom: 10, //设置地图的缩放级别
});
map.setMapStyle('amap://styles/whitesmoke');

使用自定义地图

首先,注册 成为高德地图开放平台的开发者。然后,在 自定义地图平台 进行创建、编辑、发布后,取得 地图样式ID。( 更多介绍 

设置自定义地图的方式有两种:

地图初始化时,设置自定义地图:

JavaScript
var map = new AMap.Map('container',{
    mapStyle: 'amap://styles/地图样式ID', //设置地图的显示样式
});

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

JavaScript
var map = new AMap.Map('container',{
    zoom: 10, //设置地图的缩放级别
});
map.setMapStyle('amap://styles/地图样式ID');

设置地图的显示内容

通过setFeatures方法设置显示部分底图元素:

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

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

名称说明
bg区域面
point兴趣点
road道路及道路标注
building建筑物
0 0 投票数
文章评分
订阅评论
提醒
0 评论
内联反馈
查看所有评论
0
希望看到您的想法,请您发表评论x