Vue中安装高得地图AmapVue 组件，根据坐标获取位置名称

后端人员还要写前端，真是头大。第一次在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'
  // 在此配置你需要预加载的插件，如果不配置，在使用到的时候会自动异步加载
];

遇见的问题：
vue中更新 地图的经纬度数据时，地图的坐标点居然不更新。使用this.$forceUpdate() 也不起作用。

将下面的代码

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…