微信公众号uniappH5项目使用微信JS-SDK和腾讯地图获取并解析用户地理位置信息

最新推荐文章于 2024-04-27 11:02:12 发布

Joe556

最新推荐文章于 2024-04-27 11:02:12 发布

阅读量2.1k

点赞数 30

文章标签：微信 uni-app 微信公众平台

本文链接：https://blog.csdn.net/weixin_73610394/article/details/135632762

版权

场景：公司要求微信公众号中页面按照用户位置信息，推送用户所在区域的业务。

一、安装并调用微信JS-SDK

1.使用npm安装：npm install jweixin-module --save

npm install jweixin-module --save

2.封装wechart.js文件

本人放到utils里

import {appid} from './baseDeploy';//封装了全局使用的appid
import httpgz from "@/utils/httpgz.js";//此处是我封装的http请求方法，需要替换成你自己的
var jweixin = require('jweixin-module');

export default { //判断是否在微信中     
	isWechat: function() {
		var ua = window.navigator.userAgent.toLowerCase();
		if (ua.match(/micromessenger/i) == 'micromessenger') {
			//  console.log('是微信客户端')
			console.log("打印url", location.href.split('#')[0])
			return true;
		} else {
			console.log('不是微信客户端')
			return false;
		}
	},
	
	//初始化sdk配置  
	//调取地理信息的接口
	initJssdk: function(callback) {
		console.log("wechat调配置接口");
//此处访问后端接口传递当前url给后端，后端与微信交互，获得timestamp、nonceStr、signature等返回给前端
		httpgz({
				url: 'url',
				data: {
					url: location.href.split('#')[0]
				},
				method: 'GET',
				success: res => {
					if (res.code == 200) {
						console.log("打印", res);
						jweixin.config({
							debug: false,// debug 设置为false ，alert 弹窗隐藏；为true 时为调试模式，会有弹窗提示。
							appId: appid,
							timestamp: res.data.timestamp,
							nonceStr: res.data.nonce,
							signature: res.data.signature,
							jsApiList: [
								//'checkJsApi',
								'getLocation'
							]
						});
						
						if (callback) {
							callback(res.data);
						}
					}
				}
			},

		)
	},
	
	//在需要定位页面调用location
	location: function(callback) {
		if (!this.isWechat()) {//先判断是否在微信中
			console.log('不是微信客户端')
			return;
		}
		this.initJssdk(function(res) {
			jweixin.ready(function() {
				console.log('定位ready')
				jweixin.getLocation({
					type: 'gcj02', // 默认为wgs84的gps坐标，在国内尽量使用'gcj02'
					success: function(res) {
						console.log('定位成功')
						callback(res)
					},
					fail: function(res) {
						console.log(res)
						console.log('定位失败')
					},
					complete:function(res){
					    console.log(res)
					}
				});
			});
		});
	},

}

3.在main.js全局挂载

import wechat from './utils/wechat.js' //引入

 if(wechat.isWechat()){
     Vue.prototype.$wechat =wechat;
 }; //挂载wechart

二、使用腾讯地图解析获取到的经纬度信息

4.在页面中使用（后端与腾讯地图交互）

我写在created生命周期函数中

created() {
			uni.showLoading({
				title: '加载中'
			});
			//获取定位经纬度
			if (this.$wechat && this.$wechat.isWechat()) {
				console.log('获取地理信息');
				this.$wechat.location((res) => {
					//苹果手机返回经纬度为数字，安卓手机为字符串
					console.log('微信返回地理信息', res)
					let latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
					let longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
//此处是后端调用腾讯地图api，前端将经纬度传递给后端，后端解析后返回地理位置信息
					this.httpgz({
						url : 'url',
						method:'get',
						data:{latitude,longitude},
						success: res => {
							if (res.code == 200){
								console.log('获取地址',res);
							
							}
						}
					})
					
				})
			};
		},

5.前端也可以直接调腾讯地图的api（不建议）

但是前端调用时，本人遇到问题，微信开发者工具调用成功获取地理信息。但是真机测试一直无法获取到腾讯地图的解析返回。

created() {
			uni.showLoading({
				title: '加载中'
			});
			//获取定位经纬度
			if (this.$wechat && this.$wechat.isWechat()) {
				this.$wechat.location((res) => {
					console.log('微信返回地理信息', res)
					let latitude = res.latitude; // 纬度
					let longitude = res.longitude; // 经度，
					console.log('处理经纬度-----',latitude,longitude);
					//腾讯地图逆向解析获取地区code值
					uni.request({ 
						url: 'https://apis.map.qq.com/ws/geocoder/v1/?key='+ txMapKey +'&location=' +
							latitude + ',' + longitude,
						method: 'GET',
						timeout: 10000,
						success: (res) => {
						    uni.hideLoading()
							if (res.statusCode == 200) {
								console.log('逆解析', res)
	
							} else {
								console.log('腾讯解析失败', res)
								uni.showToast({
									title: '腾讯解析失败',
									icon: 'none'
								})

							}
						},
						fail: err => { //网络请求失败的回调
							uni.hideLoading()
							uni.showToast({
								title:'网络解析失败',
								icon:'none'
							})

						}
					});
				})
			};
		},