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

本文介绍如何在项目中集成高德地图API,包括开发者账号注册、应用创建、地图导航功能实现等步骤,并提供地址解析及经纬度获取的示例代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

准备工作:
  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信息
在这里插入图片描述

UniApp是一个基于Vue.js的跨平台框架,它允许开发者构建一次代码,即可运行在微信小程序、H5、iOS、Android等多个平台上。高德地图API是其中的一个强大组件,可以用于获取地理位置信息。 如果你想在UniApp中利用高德地图根据用户输入的经纬度获取对应的省份、城市和区县信息,你可以按照以下步骤操作: 1. 首先,在项目中引入高德地图JavaScript SDK:通过`@dcloudio/uni-map`插件或直接引用官方提供的API文件。 2. 获取用户位置授权:在生命周期钩子或需要获取位置的地方请求用户权限,例如使用`uni.getLocation()`方法。 ```javascript uni.getLocation({ type: 'gcj02', // 使用高坐标系 success: function(res) { const { latitude, longitude } = res.location; getProvinces(longitude, latitude); }, fail: function() { console.error('获取位置失败'); } }); ``` 3. 调用高德地图的地点检索服务,传入经纬度查询地理编码信息: ```javascript function getProvinces(longitude, latitude) { uni.createSelectorQuery().select('#map').fields({ latitude: true, longitude: true, .province: 'province', city: 'city', district: 'district' }).exec((res) => { if (res && res[0]) { const province = res[0].province; const city = res[0].city; const district = res[0].district; console.log(`经度:${longitude}, 纬度:${latitude}, 地址:${province} ${city} ${district}`); } else { console.error('获取地理位置信息失败'); } }); } ``` 4. 定义一个包含高德地图API的全局配置,如需注册地图实例等。 注意:确保你的项目已经设置了所需的API Key,并遵守高德地图的服务协议。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值