vue2调用高德地图(Amap)及其UI组件

vue调用高德地图只需四步，具体如下：1、申请高德KEY。方法自行百度 http://lbs.amap.com/dev/key/app；2、在项目的index.js文件中引入高德地图JS_API，如下：3、在项目build/webpack.base.conf.js中加入如下代码：externals: {'AMap': 'AMap','AMapUI': '...

非为000

19690人浏览 · 2018-08-30 20:20:44

非为000 · 2018-08-30 20:20:44 发布

vue调用高德地图只需四步，具体如下：

1、申请高德KEY。方法自行百度 http://lbs.amap.com/dev/key/app；
2、在项目的index.js文件中引入高德地图JS_API，如下：
这里写图片描述

3、在项目build/webpack.base.conf.js中加入如下代码：

externals: {
   'AMap': 'AMap',
   'AMapUI': 'AMapUI'
 }

具体位置如下：

4、在你需要使用地图的组件中初始化并渲染，具体如下：
这里写图片描述

注：

记得重启项目(如遇报错)；
画红线注意点之外，其余属性，自行查看高德API即可；

end~

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^