同步操作将从 用生命研发技术/vue-amap(高德地图JSAPI2.0) 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
基于vue-admin-template为模板,开发的vue版本的高德地图JSAPI2.0。编写原因是因为我曾经开发时遇到很多的问题,还有就是开发时遇到的一些坑(当时使用的是百度地图,后期也用到高德地图)。因此,利用工作之余的时间写了一个vue版本的高德地图示例中心,由于本人是一名Java开发,前端水平有限,写的不好的地方,还望各位前端大佬口下留情。
项目参考高德地图JSAPI2.0示例中心开发,示例地址:https://lbs.amap.com/demo/list/jsapi-v2,如有侵权,请联系邮箱:538832@qq.com删除。
高德地图官网参考手册:https://lbs.amap.com/api/jsapi-v2/documentation
# 克隆项目
git clone git clone https://gitee.com/java5219/vue-amap.git
# 进入项目目录
cd vue-amap
# 安装依赖
npm install
# 建议不要直接使用 cnpm 安装以来,会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org
# 启动服务
npm run dev
浏览器访问 http://localhost:9528
# 构建测试环境
npm run build:stage
# 构建生产环境
npm run build:prod
# 预览发布环境效果
npm run preview
# 预览发布环境效果 + 静态资源分析
npm run preview -- --report
# 代码格式检查
npm run lint
# 代码格式检查并自动修复
npm run lint -- --fix
1、注册地址:https://lbs.amap.com/dev/id/choose
2、选择开发者类型
3、完善开发者信息
1、控制台地址:https://console.amap.com/dev/index
2、选择应用管理--我的应用
3、创建新应用,输入应用名称选择应用类型
4、添加key,输入key名称,服务平台选择Web端(JS API)
1、找到public/index.html文件,替换为自己的key
2、如果有用到自定义地图
设置地图样式的方式有两种:
在地图初始化时设置:
var map = new AMap.Map('container',{
mapStyle: 'amap://styles/whitesmoke', //设置地图的显示样式
});
地图创建之后使用Map对象的setMapStyle方法来修改:
var map = new AMap.Map('container',{
zoom: 10, //设置地图的缩放级别
});
map.setMapStyle('amap://styles/whitesmoke');
首先,注册 成为高德地图开放平台的开发者。然后,在 自定义地图平台 进行创建、编辑、发布后,取得 地图样式ID。
设置自定义地图的方式有两种:
地图初始化时,设置自定义地图:
var map = new AMap.Map('container',{
mapStyle: 'amap://styles/地图样式ID', //设置地图的显示样式
});
地图创建之后使用Map
对象的setMapStyle
方法进行地图样式的变更:
var map = new AMap.Map('container',{
zoom: 10, //设置地图的缩放级别
});
map.setMapStyle('amap://styles/地图样式ID');
通过setFeatures
方法设置显示部分底图元素:
map.setFeatures("road"); // 单一种类要素显示
map.setFeatures(['road','point']); // 多个种类要素显示
目前支持以下四种地图要素的选择性显示:
名称 | 说明 |
---|---|
bg | 区域面 |
point | 兴趣点 |
road | 道路及道路标注 |
building | 建筑物 |
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。