⾼德地图Web端JavaScriptAPI开发（⼀）---个性化展⽰（⾃
定义地图）
遇到⼀个功能，需要使⽤地图功能，但是地图上不要显⽰太多的物体，不然会遮盖地图上的标记，因此需要⾃定义地图，去掉⼀些不需要的覆盖物。
话不多说，直接⾛步骤！
First. 需要登录⾼德开发者控制台，在地图⾃定义平台进⾏完全⾃主的⾃定义地图样式的创建、编辑、发布、删除等操作。
如上图所⽰，点击“创建地图样式”即可进⼊样式创建界⾯，如下所⽰
web端登录
可以选择已经存在的⼏种样式，⽐如标准、马卡龙等，想创建⾃⼰的就点击左上⾓的“创建”按钮，界⾯如下：
可以在修改左上⾓“我的地图样式_2”中修改该地图样式的名称，选择页⾯左边的页⾯元素，将不需要显⽰的覆盖物前⾯√号去掉即可。
可以在页⾯最上⽅设置“地图中⼼点位置”，缩放等级。
操作完成以后，可点击右上⾓的保存或发布。保存是将样式保存到“地图⾃定义平台”中。
在地图⾃定义平台中选择需要发布的样式，点击发布即可将样式发布出去（请注意①地图样式ID和开发者Key必须同属于⼀个开发者账号②样式的发布⽣效需要1分钟时间。），地图样式在“使⽤与分享”中查看
Second 在jsp中设置地图样式，有两种⽅式
⑴创建地图时直接设置
<script type="text/javascript" src = 'webapi.amap/maps?v=1.4.0&key=您的JS API开发者Key'></script> <script type="text/javascript">
var map = new AMap.Map('mapDiv', {
mapStyle: 'amap://styles/地图样式ID'
});
</script>
⑵在JavaScript中添加如下代码
map.setMapStyle('amap://styles/地图样式ID');
这样即可完成⾃定义地图的添加
同时也可以直接使⽤⾃定义平台中作为模版的⼏个官⽅样式
var map = new AMap.Map('mapDiv', {
mapStyle: 'amap://styles/模版样式的英⽂名'//样式URL
});
//map.setMapStyle('amap://styles/模版样式的英⽂名');
英⽂名称名称样式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建筑物

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。