vue cli项目中简单引入 高德地图【亲测实用，可供参考】 |
您所在的位置：网站首页 › vue地图项目 › vue cli项目中简单引入 高德地图【亲测实用，可供参考】 |
vue cli项目中简单引入 高德地图【亲测实用，可供参考】
|
*前期准备 注册账号并申请Key 首先，注册开发者账号，成为高德开放平台开发者 登陆之后，在进入「应用管理」 页面「创建新应用」 为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」 第一步 使用 npm 包管理工具下载 loader （下载速度慢） npm i @amap/amap-jsapi-loader --save 推荐使用 cnpm 下载，下载速度会快一些，若您在这之前没有安装 cnpm ，可以现在安装上，此后需要下载其它东西都可以使用了，提高下载速度 安装 cnpm npm i cnpm -g i 即 install -g 即 global ，就是安装到全局的意思，成功安装之后，在整台电脑设备上都可以使用使用 cnpm 安装 loader （下载速度快） cnpm i @amap/amap-jsapi-loader --save  vue cli项目中简单引入 高德地图【亲测实用，可供参考】 第二步 创建map容器 第三步引入loader import AMapLoader from '@amap/amap-jsapi-loader'; 第四步加载 这里的代码也可以根据实际情况封装在函数当中使用 在data中创建一个map用于接收new出来的Map实例 AMapLoader.load({ "key": "这里填上你的key", // 申请好的Web端开发者Key "version": "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 // 次数省略若干参数信息，详情请移步官网 https://lbs.amap.com/api/jsapi-v2/guide/abc/load }).then((AMap)=>{ this.map = new AMap.Map('container'); }).catch(e => { console.log(e); }) 完整code // 引入loader import AMapLoader from '@amap/amap-jsapi-loader'; // 加载 AMapLoader.load({ "key": "这里填上你的key", // 申请好的Web端开发者Key "version": "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 // 此处省略若干参数信息，详情请移步官网 https://lbs.amap.com/api/jsapi-v2/guide/abc/load }).then((AMap)=>{ // 在data中声明的map this.map = new AMap.Map('container'); }).catch(e => { console.log(e); }) export default { name: 'App', data(){ return { map: null // 声明一个空的map } }, } 查看成果 vue cli项目中简单引入 高德地图【亲测实用，可供参考】 这里只是简单列举引入高德地图的一种方式，简单粗暴且易懂，更多详细API文档请移步官网 开发 | 高德地图API |
【本文地址】
今日新闻 |
推荐新闻 |