文章目录
一、经验分享1. 微信api现状2. 解决方案3. 适用场景二、小程序集成腾讯定位服务2.1. 注册腾讯开发者2.2. 创建应用2.3. 添加key2.4. 下载sdk2.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. 适用场景
微信小程序和企业微信小程序
二、小程序集成腾讯定位服务
文档地址：/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview
2.1. 注册腾讯开发者
前提：注册腾讯开发者：/，然后登陆【管控台】
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.
点击修改添加https://apis.
三、开发实战
我使用的是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
/miniProgram/jsSdk/jsSdkGuide/methodReverseGeocoder
4.4. 逆地址解析
/service/webService/webServiceGuide/webServiceGcoder
复制到浏览器上，打开即可
https://apis./ws/geocoder/v1/?location=39.80355875651042,116.58354573567708&key=JF7BZ-OEYEU-OD2VS-2XALL-VOMDE-7MFNU
