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…

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值