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

相关推荐
刻刻帝的海角1 天前
基于UniApp与Vue3语法糖的实时任务管理应用开发实践
uni-app
能不能送我一朵小红花1 天前
基于uniapp的PDA手持设备红外扫码方案
前端·uni-app
chaffererdog1 天前
uniapp开发微信小程序使用vk-uview-ui的uSearch搜索组件,在微信开发者工具中点击输入框会意外触发custom事件
微信小程序·小程序·uni-app
脾气有点小暴1 天前
uniapp通用递进式步骤组件
前端·javascript·vue.js·uni-app·uniapp
草字1 天前
uniapp 滚动到表单的某个位置,表单验证失败时。
前端·javascript·uni-app
脾气有点小暴1 天前
uniapp通用单张图片上传组件
前端·javascript·vue.js·uni-app·uniapp
郑州光合科技余经理1 天前
技术架构:跑腿配送系统海外版源码全解析
java·开发语言·前端·数据库·架构·uni-app·php
2501_915918411 天前
Flutter 加固方案全解析,从 Dart 层到 IPA 成品的多工具协同防护体系
flutter·macos·ios·小程序·uni-app·cocoa·iphone
metaRTC1 天前
webRTC IPC客户端UniApp版编程指南
uni-app·webrtc·ipc
刻刻帝的海角1 天前
基于UniApp与Vue3语法糖的跨平台待办事项应用开发实践
javascript·vue.js·uni-app