uniapp 展示地图,并获取当前位置信息(精确位置)

使用uniapp 提供的map标签

html 复制代码
	  <map :key='mapIndex'  class="container" :latitude="latitude" :longitude="longitude"  ></map>

页面初始化的时候,获取当前的位置信息

javascript 复制代码
		created() {
			
	
				
			let that = this
			uni.getLocation({
				type: 'gcj02',// 火星坐标系
				isHighAccuracy:true,
				geocode:true,
				success: function (res) {
					that.latitude = res.latitude
					that.longitude  = res.longitude
					// 通过经纬度获取位置信息
					that.locationName(res.latitude, res.longitude)
				},fail:function(res){
					console.log()
						uni.showToast({
							title: '获取位置信息失败',
							duration: 2000,
							icon:'error'
						});
				}
			});
			

		},

根据获取到的经纬度 获取 位置信息(此处使用的是 高德地图的位置服务,通过高德地图的逆地理位置解析,获取定位到的经纬度的 位置信息)

javascript 复制代码
			// 定义解析位置信息的方法
			locationName(latitude, longitude) {
				let that = this
				let mapKey = '1d8xxxxxxxxxxxxxxxx'; 
				
				// 构造URL
				var url = 'https://restapi.amap.com/v3/geocode/regeo?key=' + mapKey + '&location=' + longitude + ',' + latitude;
				 
				// 使用fetch发送请求
				fetch(url)
				  .then(response =>  response.json())
				  .then(data => {
				    if (data.status === '1') {
				      // 获取到的地址信息
				      var address = data.regeocode.formatted_address;
					  that.nowAddressInfo = address
					  
				    } else {
				      console.error('Error: ' + data.info);
				    }
				  })
				  .catch(error => console.error('Error:', error));
			},

高德地图获取key

相关推荐
编程猪猪侠9 小时前
使用uni-app和Canvas生成简易双列表格布局并长按下载到本地
uni-app
anyup14 小时前
太全面啦!总结篇!99% 开发者可能都会遇到的 uView Pro 组件库问题
前端·vue.js·uni-app
iOS阿玮20 小时前
苹果市场常见的处罚邮件,最低处罚基本上听劝稳过。
uni-app·app·apple
xkxnq20 小时前
UniApp 基础开发第一步:HBuilderX 安装与环境配置
uni-app
xkxnq20 小时前
Uniapp 项目创建与目录结构解析
uni-app
少油少盐不要辣1 天前
uniapp小程序使用自定义底部tabbar,并根据用户类型动态切换tabbar数据
小程序·uni-app
复苏季风2 天前
UniApp 小白入门实战专栏①:从安装 HBuilderX 开始,3 步跑通第一个项目
前端·微信小程序·uni-app
雪芽蓝域zzs2 天前
uniapp解析富文本,视频无法显示问题
uni-app·音视频
2501_915918412 天前
uni-app 跨平台项目的 iOS 上架流程:多工具组合的高效协作方案
android·ios·小程序·https·uni-app·iphone·webview
lumi.2 天前
HarmonyOS image组件深度解析:多场景应用与性能优化指南(2.4详细解析,完整见uniapp官网)
前端·javascript·小程序·uni-app·html·css3