vue-amap安装和用法步骤

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

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

官方文档：https://elemefe.github.io/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
  plugin: ["AMap.Autocomplete", "AMap.Geocoder", "AMap.Geolocation"],
  v: "1.4.15",
  uiVersion: "1.1"
});

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

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

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

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

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

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

到此这篇关于vue-amap安装和使用的文章就介绍到这了,更多相关vue-amap安装和使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！