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:监听页面返回,禁用返回操作
前端·javascript·uni-app
mosen86812 小时前
uniapp中uni.scss如何引入页面内或生效
前端·uni-app·scss
lyz24685912 小时前
uniapp popup弹窗组件的自定义使用方法
uni-app
沙尘暴炒饭12 小时前
uniapp 前端解决精度丢失的问题 (后端返回分布式id)
前端·uni-app
牛牛科技12 小时前
生产管理系统PHP+Uniapp源码
uni-app
Smile_ping12 小时前
uniapp——APP读取bin文件,解析文件的数据内容(一)
uni-app·uniapp 读取文件·app端读取bin文件
CDERP-plus12 小时前
uniapp 3分钟集成轮播广告图
uni-app·erp·erp移动端
Liberty_yes12 小时前
uniapp input苹果中文键盘输入拼音直接切换输入焦点监听失效
uni-app
街尾杂货店&12 小时前
webpakc介绍
uni-app
洗发水很好用1 天前
uniApp打包H5发布到服务器(docker)
uni-app