vue引入高德地图api的方法（官方推荐）

K先生 2020-10-26 爱技术5679

最近做的项目有一个页面要做地图，所以就想到了引入高德地图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

vue引入高德地图api的方法（官方推荐）

下面对着文档开始操作就行了。

第一步：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规范的）。

vue引入高德地图api的方法（官方推荐）

作者：K先生本文地址：http://www.gold404.cn/info/102

上一篇： nuxt怎么引入公共的css文件

下一篇： vant组件在vue中局部引入加载的方法

vue引入高德地图api的方法（官方推荐）

文章评论

欢迎您，K先生

评论列表