vue-amap安装和使用

之前分享了异步加载高德地图api的用法，现在记录一下vue-amap的用法。

vue-amap 是饿了么开源的一套基于 Vue 2.0 和高德地图的地图组件。 数据状态与地图状态单向绑定，开发者无需关心地图的具体操作。

官方文档：组件 | vue-amap

步骤如下：

1.npm 安装

npm install vue-amap --save

如果是CDN方式，目前可通过unpkg.com/vue-amap获取最新版本的资源。

2.使用实例

实例需求描述：搜索并选择地址，选中后地图定位到该地址，并获取经纬度自动填入下方的输入框中。

注：实例中使用的框架是ElementUI，其表单组件使用比较方便。

实现步骤：

（1）安装后在main.js中设置以下内容：

import VueAMap from "vue-amap";
Vue.use(VueAMap);
// 初始化vue-amap
VueAMap.initAMapApiLoader({
  key: "your key", // 这里写你申请的高德地图的key可以去https://console.amap.com/申请key
  plugin: ["AMap.Autocomplete", "AMap.Geocoder", "AMap.Geolocation"],
  v: "1.4.15",
  uiVersion: "1.1"
});

（2）定义地图搜索组件 base/mapSearch/baseMapSearch.vue

这里样式使用了stylus，可自行转换其他样式。

（3）在组件中使用地图搜索组件，这里以弹窗为例

（4）组件引用

（5）这时，如果项目中使用了ESlint，会报AMap、AMapUI未定义的错误，我们需要在.eslintrc.js文件中定义globals属性：

module.exports = {
    // ...
    globals: {
      AMap: false,
      AMapUI: false
    }
};

这样就写好了，效果如图：

 备注（尤其重要）：

（自2021年12月02日升级，升级之后所申请的 key 必须配备安全密钥 jscode 一起使用)

所以2021年12月02日申请的key，需要在项目index.html文件或者在main.js文件写上 window._AMapSecurityConfig = { securityJsCode: '填写高德地图后台你自己申请密钥'}，两种都可以实现，一般securityJsCode密钥由后端返回填写比较安全，这里不做过多解释，可以看高德地图申请key和密钥使用文档：