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

相关推荐
你的眼睛會笑4 小时前
uni-app 实战:使用 lime-painter 实现页面内容一键生成海报并下载
uni-app
一只程序熊4 小时前
uniapp 高德地图 打开选择地址报错,也没有展示出附近的位置
android·uni-app
2501_915909061 天前
不用越狱就看不到 iOS App 内部文件?使用 Keymob 查看和导出应用数据目录
android·ios·小程序·https·uni-app·iphone·webview
万物得其道者成1 天前
uni-app Android 离线打包:多环境(prod/dev)配置
android·opencv·uni-app
学习3人组1 天前
Uniapp快速上手了解
uni-app
小鲤鱼ya1 天前
vue3 + ts + uni-app 移动端封装图片上传添加水印
前端·typescript·uni-app·vue3
2501_915921431 天前
常用iOS性能测试工具大全及使用指南
android·测试工具·ios·小程序·uni-app·cocoa·iphone
桐溪漂流1 天前
Uni-app H5 环境下 ResizeObserver 监听 mp-html 动态高度
前端·uni-app·html
芒果大胖砸1 天前
uniapp 在h5中预览pdf hybrid方法
pdf·uni-app
清音啊1 天前
Uniapp 实现左滑显示操作按钮的列表(适配多端 + 实战案例)
uni-app