uniapp 微信小程序用户授权获取当前位置信息腾讯地图

男娘i 2022-10-16 03:58 556阅读 0赞

## 获取微信小程序的AppID ##

官方文档  
[https://lbs.qq.com/qqmap\_wx\_jssdk/index.html][https_lbs.qq.com_qqmap_wx_jssdk_index.html]  
在uni-app项目中的 manifest.json 文件中的微信小程序获取AppID  
以及开启位置接口  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70]

## 获取腾讯位置服务的Key ##

搜索腾讯地图api进去并登录[https://lbs.qq.com/][https_lbs.qq.com]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 1]

## 下载sdk ##

下载微信小程序JavaScriptSDK ，也可以通过访问腾讯地图文档[https://lbs.qq.com/qqmap\_wx\_jssdk/index.html][https_lbs.qq.com_qqmap_wx_jssdk_index.html]查看教程  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 2]  
将下载的压缩包解压放入项目静态文件夹中  
![在这里插入图片描述][2021052618102357.png]  
复制刚刚配置的Key填入代码中  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 3]

## 实现定位服务： ##

vuex配置：  
store 》index.js

import Vue from "vue"
    import Vuex from "vuex"
    // 引入腾讯地图jssdk文件
    import  QQMapWX from "../static/js/qqmap-wx-jssdk.min.js"
    Vue.use(Vuex)
    
    const store = new Vuex.Store({ 
    	state: { 
    		// 默认城市
    		
    		addressInfo:{ 
    			city: '昆明市',
    			district: '西山区',
    			street: '',
    			province: '云南省',
    			address: '',
    			name: '',
    			city_code: '',
    			lat: '',
    			lng: '',
    		}
    
    	},
    	mutations: { 
    		
    		newCityFun(state, newCity) { 
    			state.addressInfo.city = newCity.city
    			state.addressInfo.district = newCity.district
    			state.addressInfo.street = newCity.street
    			state.addressInfo.province = newCity.province
    			state.addressInfo.address = newCity.address
    			state.addressInfo.name = newCity.name
    			state.addressInfo.city_code = newCity.city_code
    			state.addressInfo.lat = newCity.lat
    			state.addressInfo.lng = newCity.lng
    			console.log(state.addressInfo.city)
    		}
    	},
    	actions: { 
    		getCity(context) { 
    			// 向用户发起授权请求，弹框提示
    			uni.authorize({ 
    				// 获取用户定位信息
    				scope: "scope.userLocation",
    				// 用户同意授权执行
    				success() { 
    					// 引入腾讯地图api
    					// 实例化API核心类
    					let qqmapsdk = new QQMapWX({ 
    						// 填写自己的Key值，这个值是与AppID绑定的
    						key: 'NOMBZ-FMNCS-NCAOO-6AC37-DF76Z-VFBVX'
    					});
    					//获取位置信息
    					uni.getLocation({ 
    						type: 'gcj02',
    						success: function(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.city = res.result.address_component.city
    									newCity.district = res.result.address_component.district
    									newCity.street = res.result.address_component.street
    									newCity.province = res.result.address_component.province
    									newCity.address = res.result.address
    									newCity.name = res.result.ad_info.name
    									newCity.city_code = res.result.ad_info.city_code
    									newCity.lat = res.result.location.lat
    									newCity.lng = res.result.location.lng
    									context.commit('newCityFun', newCity)
    								},
    								fail(res) { 
    									console.log("逆地址解析失败")
    									console.log(res)
    								}
    							})
    						}
    					})
    				},
    				// 若用户不同意授权，弹框提示
    				fail(res) { 
    					uni.showToast({ 
    						icon: "none",
    						title: '注意：需要获取您的定位授权,否则部分功能将无法使用',
    						duration: 2000
    					})
    				}
    			})
    		}
    	}
    })
    export default store

## 页面使用 ##

page 》index.vue

<template>
    	<view class="content">
    		
    		<view class="text-area">
    			<text class="title">{ { title}}</text>
    		</view>
    		<view>{ { addressInfo.city}}</view>
    		<view>{ { addressInfo.district}}</view>
    		<view>{ { addressInfo.street}}</view>
    		<view>{ { addressInfo.province}}</view>
    		<view>{ { addressInfo.address}}</view>
    		<view>{ { addressInfo.name}}</view>
    		<view>{ { addressInfo.city_code}}</view>
    		<view>{ { addressInfo.lat}},{ { addressInfo.lng}}</view>
    		
    	</view>
    </template>
    
    <script>
    	import { 
    		mapState
    	} from 'vuex';
    	export default { 
    		data() { 
    			return { 
    				title: 'Hello',
    			}
    		},
    		onLoad() { 
    
    		},
    		onReady() { 
    			this.$store.dispatch('getCity')
    		},			
    		methods: { 
    
    		},
    		computed: { 
    			...mapState(["addressInfo"])
    			// newCity() { 
    			// return this.$store.state.city
    			// console.log(this.$store.state.city)
    			// }
    		}
    	}
    </script>
    
    <style>
    	.content { 
    		display: flex;
    		flex-direction: column;
    		align-items: center;
    		justify-content: center;
    	}
    
    	.text-area { 
    		display: flex;
    		justify-content: center;
    	}
    
    	.title { 
    		font-size: 36rpx;
    		color: #8f8f94;
    	}
    </style>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 5]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 6]  
搜索 闲益小区 小程序了解更多或者扫描太阳码  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70_pic_center]

[https_lbs.qq.com_qqmap_wx_jssdk_index.html]: https://lbs.qq.com/qqmap_wx_jssdk/index.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70]: /images/20221014/7c11b54a39f84440848f64bfd6f38fe4.png
[https_lbs.qq.com]: https://lbs.qq.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 1]: /images/20221014/46c556eb4afa415c9d0ed3705c14c724.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 2]: /images/20221014/830c56f975ef4f3d871ed89ddd157eee.png
[2021052618102357.png]: /images/20221014/db03d2ac2c7145c8bac35e2e3462916b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 3]: /images/20221014/89d742f9bb6640b7b3a93f74e2c07b6b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 4]: /images/20221014/cd958ed38fba4eb3b66427234f2915ca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 5]: /images/20221014/370c3566e8f8495f8ffb5708a9abf5dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 6]: /images/20221014/d51b348f058a40ac89313545c2d50c0b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221014/ab14240668264fe8a716ec5e3119c8cf.png