vue中使用高德

首先我们要申请高德地图的key,当前升级过后高德地图使用也需要加上安全秘钥

注册账号

访问高德地图开发平台根据实际情况填写就可以(实名认证的时候选择个人就可以,如果是企业级的项目,可能会涉及人员变动,建议使用公司邮箱进行注册

我的应用 | 高德控制台

注册之后在我的应用中创建新应用

vue中使用高德_第1张图片

 创建完之后就可以通过key和安全秘钥进行使用

之后我们就下载安装依赖

npm install vue-amap --save

安装完之后在main.js中引入全局依赖进行使用

vue中使用高德_第2张图片

vue中使用高德_第3张图片

当然还有其他安全的引入方法,具体可以去高德api文档看一下

JS API 的加载-基础-进阶教程-地图 JS API 2.0 | 高德地图API

 然后再页面就可以进行使用了

当然还有直接在index中添加但是后台如果有域名限制,就需要把域名限制增加一部分,当然前端也是可以的

vue中使用高德_第4张图片

然后咱们创建页面

 vue中使用高德_第5张图片

vue中使用高德_第6张图片

下面是创建的点坐标

vue中使用高德_第7张图片

vue中使用高德_第8张图片

vue中使用高德_第9张图片

vue中使用高德_第10张图片

 vue中使用高德_第11张图片

 

 

 

你可能感兴趣的:(js,vue,前端,npm,node.js,vue.js)