文章目录
- 一、经验分享
- 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. 地址解析效果图
