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

文章目录

一、经验分享
- 1. 微信api现状
- 2. 解决方案
- 3. 适用场景
二、小程序集成腾讯定位服务
- 2.1. 注册腾讯开发者
- 2.2. 创建应用
- 2.3. 添加key
- 2.4. 下载sdk
- 2.5. 合法域名
三、开发实战
- 3.1. sdk拷贝
- 3.2. 页面引用
- 3.3. 页面部分
- 3.4. 数据部分
- 3.5. 方法部分
四、真机调试
- 4.1. 项目运行
- 4.2. 调试模式
- 4.3. 效果图
- 4.4. 逆地址解析
- 4.5. 地址解析效果图

一、经验分享

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%9FonLoad() {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.latitudethat.longitude = res.longitudeQQMapWX.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. 地址解析效果图