uniapp实现微信小程序用户实时位置定位并显示地图

本文介绍了如何在Hbuilderx项目中利用腾讯位置服务API进行地理位置获取。首先在manifest.json中开放权限,然后获取腾讯地图的Key,下载并引入JavaScriptSDK。接着,根据用户授权情况调用uni.getLocation获取经纬度,使用腾讯地图的逆地址解析确定城市信息,并在Vuex中处理数据。同时,文章提到了授权管理和用户交互过程。

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

目前,我们可以通过一些现成的api来实现此功能。下面我将介绍一下通过腾讯位置服务来实现此功能的具体操作流程。

1、在Hbuilder x中对项目进行权限开放

进入到manifest.json文件中

 

2、获取调用腾讯位置服务所需的key

  1. 登录腾讯地图api: 腾讯位置服务 - 立足生态,连接未来
  2. 点击控制台--》应用管理--》我的应用--》添加Key---》填写内容--》添加

3、进入腾讯地图文档下载JavaScriptSDK     [微信小程序JavaScript SDK | 腾讯位置服务 (qq.com)](https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview)

4、解压刚下好的JavaScriptSDK

5、将min.js文件复制到项目static文件目录下

 6、实现定位服务代码

  •  Vuex配置
// 引入腾讯地图jssdk文件
import QQMapWX from "../static/js/qqmap-wx-jssdk.min.js"

export default {
	// 为当前模块开启命名空间
	namespaced: true,
	state: {
		// 默认城市
		city: '北京市',
        //当前位置的经纬度
		x: 0,
		y: 0
	},
	mutations: {
		newCityFun(state, newCity) {
			state.city = newCity
			console.log(newCity)
			console.log(state.city)
		},
		getCity() {
			var that = this
			// 获取用户是否开启 授权获取当前的地理位置、速度的权限。
			uni.getSetting({
				success(res) {
					console.log(res)

					// 如果没有授权
					if (!res.authSetting['scope.userLocation']) {
						// 则拉起授权窗口
						uni.authorize({
							scope: 'scope.userLocation',
							success() {
								let qqmapsdk = new QQMapWX({
									key: 'JOMBZ-MRF6U-GF2V3-BSKNG-757GO-O7FLR'
								});
								//点击允许后--就一直会进入成功授权的回调 就可以使用获取的方法了
								uni.getLocation({
									type: 'wgs84',
									success: function(res) {
										that.x = res.longitude
										that.y = res.latitude
										console.log("if", res)
										console.log('当前位置的经度:' + res.longitude)
										console.log('当前位置的纬度:' + res.latitude)
										// 逆地址解析方法
										qqmapsdk.reverseGeocoder({
											location: {
												latitude: res.latitude,
												longitude: res.longitude
											},
											success(res) {
												var newCity = ''
												console.log(res)
												// 取到用户的定位城市,赋值传递出去
												newCity = res.result
													.address_component.city
												// that.commit('m_location/newCityFun')
											}
										})
										uni.showToast({
											title: '当前位置的经纬度:' + res.longitude +
												',' + res.latitude,
											icon: 'success',
											mask: true
										})
									},
									fail(error) {
										console.log('失败', error)
									}
								})
							},
							fail(error) {
								//点击了拒绝授权后--就一直会进入失败回调函数--此时就可以在这里重新拉起授权窗口
								console.log('拒绝授权', error)

								uni.showModal({
									title: '提示',
									content: '若点击不授权,将无法使用位置功能',
									cancelText: '不授权',
									cancelColor: '#999',
									confirmText: '授权',
									confirmColor: '#f94218',
									success(res) {
										console.log(res)
										if (res.confirm) {
											// 选择弹框内授权
											uni.openSetting({
												success(res) {
													console.log(res.authSetting)
												}
											})
										} else if (res.cancel) {
											// 选择弹框内 不授权
											console.log('用户点击不授权')
										}
									}
								})
							}
						})
					} else {
						let qqmapsdk = new QQMapWX({
							key: 'JOMBZ-MRF6U-GF2V3-BSKNG-757GO-O7FLR'
						});
						// 有权限则直接获取
						uni.getLocation({
							type: 'wgs84',
							success: function(res) {
								that.x = res.longitude
								that.y = res.latitude
								console.log("else", res)
								console.log('当前位置的经度:' + res.longitude)
								console.log('当前位置的纬度:' + res.latitude)
								// 逆地址解析方法
								qqmapsdk.reverseGeocoder({
									location: {
										latitude: res.latitude,
										longitude: res.longitude
									},
									success(res) {
										var newCity = ''
										console.log(res)
										// 取到用户的定位城市,赋值传递出去
										newCity = res.result.address_component.city
										// that.commit('m_location/newCityFun')
									},
									fail(res) {
										console.log("错误", res)
									}
								})
								//打开地图
								uni.openLocation({
									latitude: that.y,
									longitude: that.x,
									success: function() {}
								});
								uni.showToast({
									title: '当前位置的经纬度:' + res.longitude + ',' + res.latitude,
									icon: 'success',
									mask: true
								})
							},
							fail(error) {
								uni.showToast({
									title: '请勿频繁调用!',
									icon: 'none',
								})
								console.log('失败', error)
							}
						})
					}
				}
			})
		}
	},
	actions: {

	}
}

注意:需将以上代码中的key,换成自己刚刚配置的key。

let qqmapsdk = new QQMapWX({
	key: 'JOMBZ-MRF6U-GF2V3-BSKNG-757GO-O7FLR'
});
  • 页面配置
<template>
		<view>{{addstr}}</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				title: 'Hello',
			}
		},
		onReady() {
			// 把m_location模块中的 getCity 函数映射到当前组件
			this.getCity()
			
		},
		methods: {
			...mapMutations('m_location', ['getCity']),
		},
		computed: {
			// 从getter中引入addstr
			...mapGetters('m_location', ['addstr'])
		}
	}
</script>

UniApp 是一套基于 Vue.js 的多端框架,用于快速构建兼容微信小程序、H5、App(iOS & Android)等平台的应用。要在 UniApp 中集成微信小程序地图定位功能,你需要使用腾讯地图 SDK 或微信提供的官方 Map 组件。 以下是基本步骤: 1. **引入依赖**: 在项目的 `uni-app.config.js` 文件中,添加对地图组件的支持: ```javascript // uni-app.config.js framework: { env: { wx: true, // 开启微信小程序支持 }, }, plugin: { 'map': {} // 引入地图插件 } ``` 2. **安装导入地图组件**: 使用命令行工具 `uni-app` 安装: ``` $ tns install map ``` 然后在需要使用地图定位的地方导入组件: ```vue <template> <view> <map-view :show-location="showLocation" :enable-high-precision="true"></map-view> </view> </template> <script> import { MapView } from '@vant/map'; export default { components: { MapView, }, data() { return { showLocation: false, // 控制是否显示定位 }; }, //... } </script> ``` 3. **请求用户位置权限**: 在适当的位置请求用户的地理位置访问权限,如 `onLoad` 生命周期钩子: ```javascript onLoad() { this.requestLocationPermission(); }, methods: { requestLocationPermission() { uni.geolocation.getCurrentPosition({ success(res) { // 用户同意授权,获取经纬度 this.showLocation = true; }, fail(err) { console.error('获取位置失败:', err); }, }); }, } ``` 4. **处理地图事件**: 可能还需要监听地图的 `locationChange` 事件,以便实时更新位置信息。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值