uni-app中高德地图根据地址获取逆解析经纬度

准备工作:
  1. 注册高德地图开发者账号
  2. 创建应用在这里插入图片描述
  3. 添加应用key,填写ley名称(可随便,最好与创建应用的名称保持一致),然后选择Web端(JS API),,点击提交在这里插入图片描述
  4. 提交后如下图随时所示:,我们需要的是 字符转串key在这里插入图片描述
  5. 复制key,返回到我们的项目中,在项目的manifest.json => APP模块配置中勾选Maps地图,将我们复制的key填写进去
    在这里插入图片描述
    在浏览器地址栏输入地址:https://webapi.amap.com/maps?v=1.4.15&key=你自己的key&plugin=AMap.Geocoder,打开后将资源下载到本地,放在你自己的项目中
    在这里插入图片描述
使用步骤:
  1. 在需要使用的页面中引入你下载 保存到项目中的JS文件
import mapes from '../../utils/maps.js'
  1. 下面是逻辑代码
naviLocation(item) {
	let that = this;
	let adress = item.user_adress;
	AMap.plugin('AMap.Geocoder', function() {
		//创建AMap.Geocoder构造函数
		let geocoder = new AMap.Geocoder({
			city: '010', //代表全国范围内
			extensions: 'all'
		})
		//调用地址逆解析方法
		geocoder.getLocation(adress, function(status. result) {
			if(status == 'complete' && result.info === 'ok') {
				// console.log(result)
				//获取到的纬度信息
				let lat = result.geocodes['0'].location.lat;
				//获取到的经度信息
				let lon = result.geocodes['0'].location.lng;
				//接下来我们可以通过uni-app API打开地图导航看看效果
				uni.openLocation({
					latitude: lat, //纬度
					longitude: lon, //经度
					adress: adress, //详细地址
					success() {
						
					},
					fail(err) {
						that.$msg('地图调用失败,请重试,或者反馈问题!')
					}
				})
			} else {
				that.$msg('该地址没有解析到结果!')
			}
		})
	})
}

这是控制台打印的result信息
在这里插入图片描述

  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值