vue-amap安装和使用方法是什么

本篇内容主要讲解"vue-amap安装和使用方法是什么"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"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-amapVueAMap.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安装和使用方法是什么"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！