vue引入高德地图api的方法(官方推荐)
最近做的项目有一个页面要做地图,所以就想到了引入高德地图api,高德地图的官方文档虽然写的也算是比较清楚,但对于刚入门的朋友看着还是会懵逼的,就比如我。。。
如果直接用script标签引入是最方便的,我懵逼的是怎么在vue中安装,高德地图毕竟不是开源的,肯定也是找不到官方的npm包,所以就有点头疼了,在我抓头发之际,突然看到了高德的文档中关于JSAPI 2.0的文档,和之前v1版本不同的是,官方似乎理解v1版本小伙伴们不知道怎么引入的痛楚,所以在这个2.0版本提供了npm的安装方式Loader(下图有官方对loader的介绍),哈哈太开心了,问题随之解决。
这里先奉上高德地图JSAPI 2.0的官方文档地址:
https://lbs.amap.com/api/jsapi-v2/guide/abc/load
下面对着文档开始操作就行了。
第一步:npm安装loader
npm i @amap/amap-jsapi-loader --save
第二步:引入loader(在你需要使用地图的vue页面)
import AMapLoader from '@amap/amap-jsapi-loader';
mounted() {
AMapLoader.load({
"key": "***********", // 申请好的Web端开发者Key,首次调用 load 时必填
"version": "1.4.15", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
"plugins": [], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
"AMapUI": { // 是否加载 AMapUI,缺省不加载
"version": '1.1', // AMapUI 缺省 1.1
"plugins": [], // 需要加载的 AMapUI ui插件
},
"Loca": { // 是否加载 Loca, 缺省不加载
"version": '1.3.2' // Loca 版本,缺省 1.3.2
},
}).then((AMap) => {
var map = new AMap.Map('container');
}).catch(e => {
console.log(e);
});
},
直接复制官方的可能会报错,第一个是plugins参数官方忘记加英文逗号,第二个是map需要加var(安装了eslint规范的)。
作者:K先生本文地址:http://www.gold404.cn/info/102
版权声明:本文为原创文章,版权归 K先生个人博客 所有,欢迎分享本文,转载请保留出处,谢谢!
上一篇: nuxt怎么引入公共的css文件
下一篇: vant组件在vue中局部引入加载的方法
文章评论
评论列表
你好,博主请问关于 "AMapUI": { // 是否加载 AMapUI,缺省不加载 "version": '1.1', // AMapUI 缺省 1.1 "plugins": [], // 需要加载的 AMapUI ui插件 }, 这块如何引入插件,官方示例只有一种示例,按照官方的可以加载,但是换成其他的插件就报错了 一下官方示例地址 https://lbs.amap.com/api/amap-ui/demos/amapui-amaploader/amapui-amaploader1 我想要加载轨迹展示的插件,还望大佬解惑,找遍全网也没有关于2.0的文章