企业微信小程序_获取准确定位的方法及解决定位不准确的问题

一、经验分享

1. 微信api现状

微信小程序给我们提供了三个获取位置的接口，但是没有返回一个准确地址的方法。

2. 解决方案

好在腾讯地图准们为小程序提供了接口SDK来获取位置信息。

3. 适用场景

微信小程序和企业微信小程序

二、小程序集成腾讯定位服务

文档地址：https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview

2.1. 注册腾讯开发者

前提：注册腾讯开发者：https://lbs.qq.com/，然后登陆【管控台】

2.2. 创建应用

2.3. 添加key

申请开发者密钥（key）：申请密钥
开通webserviceAPI服务：控制台 ->应用管理 -> 我的应用 ->添加key-> 勾选WebServiceAPI -> 保存

(小程序SDK需要用到webserviceAPI的部分服务，所以使用该功能的KEY需要具备相应的权限)

2.4. 下载sdk

建议下载1.2版本

下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.1 JavaScriptSDK v1.2

2.5. 合法域名

前提：已经在微信公众平台注册微信小程序或企业微信小程序，这是前提

安全域名设置，在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名，添加 https://apis.map.qq.com

点击修改添加 https://apis.map.qq.com

三、开发实战

我使用的是HBuilder X 选择uniapp项目模板，开发微信小程序，给大家进行演示重点是腾讯地图sdk定位服务，因此，代码部分已去除逻辑代码部分，演示代码可以直接复制到你们的项目中，按照以下流程操作，就会显示定位效果。

3.1. sdk拷贝

把下载好的qqmap-wx-jssdk.js文件复制到项目中

3.2. 页面引用

具体路径，以实际sdk的防止目录位置为准

	import qqmapsdk from '../../static/qqmap-wx-jssdk.js';

3.3. 页面部分

	<view>
		经纬度：{{latitude}}-{{longitude}}<br />
		地址信息：{{addressRes}}<br />
		地址信息2：{{address}}
	</view>

3.4. 数据部分

data() {
			return {
				latitude: '',
				longitude: '',
				address: '',
			}
		},

3.5. 方法部分

直接复制即可

	// 监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
		// https://uniapp.dcloud.io/collocation/frame/lifecycle?id=%E9%A1%B5%E9%9D%A2%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F
		onLoad() {
			const that = this
			// 实例化腾讯地图API核心类
			const QQMapWX = new qqmapsdk({
				key: 'JF7BZ-OEYEU-OD2VS-2XALL-VOMDE-7MFNU'// 必填
			});
			//获取当前位置
			wx.getLocation({
				type: 'gcj02',
				success: function(res) {
					//根据坐标获取当前位置名称，显示在顶部，腾讯地图逆地址解析
					console.log(res.latitude);
					console.log(res.longitude);

					that.latitude = res.latitude
					that.longitude = res.longitude
					QQMapWX.reverseGeocoder({
						location: {
							latitude: res.latitude,
							longitude: res.longitude
						},
						success: function(addressRes) {
							// that.addressRes = JSON.parse(addressRes)
							console.log(addressRes);
							var address = addressRes.result.formatted_addresses.recommend;
							console.log(address);
							that.address = address
						}
					})
				},
			})
		},

四、真机调试

提前：下载微信开发者工具

4.1. 项目运行

运行-运行到小程序模拟器(M)-运行微信开发者工具

4.2. 调试模式

选择-真机调试-自动编译-生成二维码-手机扫码测试

4.3. 效果图

到此，效果已经实现了。

为了让大家在浏览器上看到更多信息，下面为大家展示地址解析的具体信息，借助腾讯地图webservice api 的逆地址解析

特殊说明：微信小程序SDK有自己的逆地址解析api，项目中用的也是小程序自己的api
https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodReverseGeocoder

4.4. 逆地址解析

https://lbs.qq.com/service/webService/webServiceGuide/webServiceGcoder

复制到浏览器上，打开即可

https://apis.map.qq.com/ws/geocoder/v1/?location=39.80355875651042,116.58354573567708&key=JF7BZ-OEYEU-OD2VS-2XALL-VOMDE-7MFNU

4.5. 地址解析效果图