高德地图Web端JavaScript API开发(一)---个性化展示(自定义地图)
遇到一个功能,需要使用地图功能,但是地图上不要显示太多的物体,不然会遮盖地图上的标记,因此需要自定义地图,去掉一些不需要的覆盖物。
话不多说,直接走步骤!
First. 需要登录高德开发者控制台,在地图自定义平台进行完全自主的自定义地图样式的创建、编辑、发布、删除等操作。
如上图所示,点击“创建地图样式”即可进入样式创建界面,如下所示
可以选择已经存在的几种样式,比如标准、马卡龙等,想创建自己的就点击左上角的“创建”按钮,界面如下:
可以在修改左上角“我的地图样式_2”中修改该地图样式的名称,选择页面左边的页面元素,将不需要显示的覆盖物前面√号去掉即可。
可以在页面最上方设置“地图中心点位置”,缩放等级。
操作完成以后,可点击右上角的保存或发布。保存是将样式保存到“地图自定义平台”中。
在地图自定义平台中选择需要发布的样式,点击发布即可将样式发布出去(请注意①地图样式ID和开发者Key必须同属于一个开发者账号②样式的发布生效需要1分钟时间。),地图样式在“使用与分享”中查看
Second 在jsp中设置地图样式,有两种方式
⑴创建地图时直接设置
<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'}); </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
建筑物
高德地图Web端JavaScript API开发(一)---个性化展示(自定义地图)相关推荐
- 高德地图Web端JavaScript API开发(二)---在地图上绘制(点标注)
使用高德地图在很多时候需要在地图上标记位置,并且很多时候需要用到自定义的图标去完成这种位置的标记. 当然,这些功能高德地图都为我们准备了,比如常用的地图覆盖物Marker和信息窗体等.这里就先说一下点 ...
- 高德地图 web 端 JS API 遇到的坑及性能优化
[JS API V2.0] 本指望全面提升一下性能,结果发现一些硬伤,迫不得已转到1.4.15版本,先说一下最新的v2.0的问题. 因为务业需要规划线路,但是这个版本中,规划线路,并且经过中间点时,部 ...
- vue使用高德地图web端JS API(vue-amap插件)
高德地图地图 JS API v2.0:https://lbs.amap.com/api/jsapi-v2/summary/ vue-amap(基于Vue 2.0和高德地图的地图组件):https:// ...
- 前端系列——vue2+高德地图web端开发(poi搜索两种方式)
前端系列--vue2+高德地图web端开发(poi搜索) 前言 基础 什么是poi搜索 1. 输入提示结合poi搜索 官方代码 步骤 1.进行plugins插件注册 2.data中编写placeSea ...
- 前端系列——vue2+高德地图web端开发(使用和引入)
vue2+高德地图web端开发(使用和引入) 前言 基础 准备工作 高德地图的个人开发者注册 高德api网址 1.点击进行注册 2.注册完之后进入控制台 3.创建新应用 4.添加 高德 2.0 新增 ...
- 前端系列——vue2+高德地图web端开发(行政区边界绘制)
vue2+高德地图web端开发(行政区边界绘制) 前言 原理 基础 实现步骤 1.eslint设置AMap为全局变量放置报错 2.Search.vue传输给MapContainer.vue数据然后进行 ...
- 高德地图JavaScript API开发研究
高德地图JavaScript API开发研究 原文:高德地图JavaScript API开发研究 高德地图JavaScript API是一套用JavaScript 语言编写的应用程序接口,可以通过各种 ...
- 百度地图开发:地图调起API(Web端)使用终点经纬度直接调用百度地图导航信息的解决方案
地图调起API 百度地图URI API是为开发者提供直接调起百度地图产品(百度地图手机客户端)以满足特定业务场景下应用需求的程序接口,开发者只需按照接口规范构造一条标准的URI,便可在PC和移动端浏览 ...
- 高德地图web端接入
1.准备阶段 进入高德开发平台(高德开放平台 | 高德地图API),登录你的账号,如果没有账号需要先注册,进行开发者的认证,这里由于我已经认证过了,所以直接注册流程就不展示了. 打开控制台,选择应用管 ...
最新文章
- Android虚拟键盘遮挡EditText的解决方案
- syslog记录history历史记录
- python csdn博客_利用Python抓取CSDN博客
- sun java ide,1.6 JAVA IDE安装
- UnicodeMath数学公式编码_翻译(Unicode Nearly Plain - Text Encoding of Mathematics Version 3)
- Linux源码编译安装程序
- 【转】解决IE8无法加载webplayer流媒体播放器的方法
- 畅购商城项目,面试问答,项目详解及全部代码
- 计算机操作系统--文件管理
- html中响应ocx事件,JS实现OCX控件的事件响应示例
- multisim红绿灯元器件在哪里_实验二Multisim交通灯仿真.ppt
- buctoj2021年ACM竞赛班训练(七)题解
- /usr/bin/ld: cannot find -lxxx错误的通用解决方法
- 【20180615】【射频通信】RF、IF、Baseband的区别,PLL和VCO的定义,I/Q信号的定义
- 使用wiki百科和gensim训练中文词向量
- js动画和css3动画的差异性
- 静态IP上网是什么意思
- #网页动画# 重力小球
- 考研数学高数1-1综合测试-函数及其性质
- DP(动态规划)是什么?