本文共 1593 字，大约阅读时间需要 5 分钟。

后端人员还要写前端，真是头大。第一次在vue中使用高德地图提供的组件记录一下。

安装使用看官方文档就够了：https://jimnox.gitee.io/amap-vue/intro/installation.html

1、 引入依赖

npm install --save @amap/amap-vue

2、全局配置

import AmapVue from '@amap/amap-vue';AmapVue.config.version = '2.0'; // 默认2.0，这里可以不修改AmapVue.config.key = '您的JSAPI KEY';AmapVue.config.plugins = [  'AMap.ToolBar',  'AMap.MoveAnimation',  // 在此配置你需要预加载的插件，如果不配置，在使用到的时候会自动异步加载];Vue.use(AmapVue);

说明：

• key使用你自己申请的key。
• 添加一些地图类的插件， 在vue项目中可以直接 通过new AMap.ToolBar()使用。

配置到这一步就完成了

下面是根据经纬度获取位置的代码：

getPositionByLonLats() {                const that = this;                // 需要在插件中引入                let geocoder = new AMap.Geocoder({});                // 第一个参数是你的经纬度数据                geocoder.getAddress(this.position, function (status, result) {                    if (status === 'complete' && result.info === 'OK') {                        // console.log(result.regeocode.formattedAddress);                        that.address = result.regeocode.formattedAddress;                        console.log(that.address);                    } else {                        that.address = "未检测到该地址"                    }                });            },

在插件中引入 AMap.Geocoder

AmapVue.config.plugins = [  'AMap.ToolBar',  'AMap.MoveAnimation',  'AMap.Geocoder'  // 在此配置你需要预加载的插件，如果不配置，在使用到的时候会自动异步加载];

遇见的问题：

将下面的代码

this.position[0]= Number(this.currentViewData.longiatude)this.position[1]= Number(this.currentViewData.latitude)

改成这样，就生效了。

this.position= [Number(this.currentViewData.longiatude),Number(this.currentViewData.latitude)]

amazing…

转载地址：http://fdfoi.baihongyu.com/