uniapp开发小程序获取定位信息（腾讯地图）

定位一直是一个让人头疼的问题，不是这个有问题就是那里有问题。这里结合我多方查找和实际运行，得到的一些经验给予分享。
怎么进行定位？根本流程是：
1.去腾讯位置服务的控制那里创建一个应用
腾讯位置服务 - 立足生态，连接未来 (qq.com)

2.添加一个key，并开通WebServiceAPI服务
这个key是到时候用来定位的标识（须要的）。开发的哪种就选择哪种就行。

3.下载微信jssdk（这里会用到逆所在解析等等）
微信小程序JavaScript SDK | 腾讯位置服务 (qq.com)
点击去下载此中之一即可。

 下载好后，我将它放在这个文件夹中进利用用，放在其它文件夹也行（不肯定跟我一样），看自己习惯，只要到时候导入路径写对。

4.去小程序后台管理开启安全域名
小程序 (qq.com)

将这个域名添加进去

1.        
2. https://apis.map.qq.com

复制代码

5.修改设置manifest.json文件
将位置接口勾选了

还要修改其源码，将以下这段代码添加：

1. "permission" : {
2.             "scope.userLocation" : {
3.                 "desc" : "为了您更好的体验，请确认获取您的位置信息"
4.             }
5.         },
6.         "requiredPrivateInfos" : [
7.             "getLocation",
8.             "chooseLocation",
9.             "onLocationChange",
10.             "startLocationUpdateBackground"
11.         ]

复制代码

具体在这里下面添加： 

6.在使用到的页面引入sdk

1. import QQMapWX from "../../common/qqmap-wx-jssdk.js"

复制代码

不过这里有个坑，如许导入会报错，我查阅了一下，使用require导入也不可，具体是如许操纵之后就可以了。
找到刚才你下载的sdk源文件，打开它滑倒最下面，将
module.exports = QQMapWX;注释掉，换成

1. export default QQMapWX;

复制代码

7.使用uni.getLocation获取经纬度信息给QQMapWX实例进利用用
uni.getLocation(OBJECT) | uni-app官网 (dcloud.net.cn)
uni.getLocation(OBJECT)

获取当前的地理位置、速度。
OBJECT 参数说明
参数名范例必填说明平台差别说明typeString否默以为 wgs84 返回 gps 坐标，gcj02 返回国测局坐标，可用于 uni.openLocation 和 map 组件坐标，App 和 H5 需设置定位 SDK 信息才可支持 gcj02。altitudeBoolean否传入 true 会返回高度信息，由于获取高度须要较高精确度，会减慢接口返回速度抖音小程序、飞书小程序、支付宝小程序不支持geocodeBoolean否默认false，是否解析所在信息仅App平台支持（安卓需指定 type 为 gcj02 并设置三方定位SDK）highAccuracyExpireTimeNumber否高精度定位超时时间(ms)，指定时间内返回最高精度，该值3000ms以上高精度定位才有用果App (3.2.11+)、H5 (3.2.11+)、微信小程序 (基础库 2.9.0+)timeoutString否默以为 5，定位超时时间，单位秒仅飞书小程序支持cacheTimeoutNumber否定位缓存超时时间，单位秒；每次定位缓存当前定位数据，并记下时间戳，当下次调用在cacheTimeout之内时，返回缓存数据仅飞书小程序、支付宝小程序支持accuracyString否默以为 high，指定盼望精度，支持 high，best。当指定 high 时，盼望精度值为100m，当指定 best 时盼望精度值为20m。当定位得到的精度不符合条件时，在timeout之前会继续定位，实验拿到符合要求的定位结果仅飞书小程序支持isHighAccuracyBoolean否开启高精度定位App (3.4.0+)、H5 (3.4.0+)、微信小程序 (基础库 2.9.0+)successFunction是接口调用乐成的回调函数，返回内容详见返回参数说明。failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数（调用乐成、失败都会执行） success 返回参数说明
参数说明latitude纬度，浮点数，范围为-90~90，负数表示南纬longitude经度，浮点数，范围为-180~180，负数表示西经speed速度，浮点数，单位m/saccuracy位置的精确度altitude高度，单位 mverticalAccuracy垂直精度，单位 m（Android 无法获取，返回 0）horizontalAccuracy水平精度，单位 maddress所在信息（仅App端支持，需设置geocode为true） address 所在信息说明
属性范例描述说明countryString国家如“中国”，假如无法获取此信息则返回undefinedprovinceString省份名称如“北京市”，假如无法获取此信息则返回undefinedcityString都会名称如“北京市”，假如无法获取此信息则返回undefineddistrictString区（县）名称如“朝阳区”，假如无法获取此信息则返回undefinedstreetString街道信息如“酒仙桥路”，假如无法获取此信息则返回undefinedstreetNumString获取街道门牌号信息如“3号”，假如无法获取此信息则返回undefinedpoiNameStringPOI信息如“电子城．国际电子总部”，假如无法获取此信息则返回undefinedpostalCodeString邮政编码如“100016”，假如无法获取此信息则返回undefinedcityCodeString都会代码如“010”，假如无法获取此信息则返回undefined 示例

1. uni.getLocation({
2.         type: 'wgs84',
3.         success: function (res) {
4.                 console.log('当前位置的经度：' + res.longitude);
5.                 console.log('当前位置的纬度：' + res.latitude);
6.         }
7. });

复制代码

使用type:'gcj02 '会准确一些。
以下是完整demo代码，此中参考了这位老哥的文章【uniapp小程序实战】—— 使用腾讯地图获取定位_uniapp 腾讯地图-CSDN博客

1. <template>
2.   <view class="content">
3.     <view class="address" @click="getposition">
4.       获取定位
5.     </view>
6.     当前的定位是:{{position}}
7.   </view>
8. </template>
10. <script>
11.   import QQMapWX from "../../common/qqmap-wx-jssdk.js"
12.   export default {
13.     data() {
14.       return {
15.         title: 'Hello',
16.         position:''
17.       }
18.     },
19.     methods: {
20.       async getposition() {
21.         const location = await this.getLocationInfo()
22.         console.log("lo",location)
23.         this.position = location.formatted_addresses
24.         console.log("po",this.position)
25.       },
26.       async getLocationInfo() {
27.         return new Promise((resolve) => {
28.           let location = {
29.             longitude: 0,
30.             latitude: 0,
31.             province: "",
32.             city: "",
33.             area: "",
34.             street: "",
35.             address: "",
36.             formatted_addresses:""
37.           };
38.           // 使用uni.getLocation获取经纬度
39.           uni.getLocation({
40.             type: "gcj02",
41.             isHighAccuracy: true,
42.             success(res) {
43.               location.longitude = res.longitude;
44.               location.latitude = res.latitude;
45.               // 创建实例
46.               const qqmapsdk = new QQMapWX({
47.                 key: 'ONXBZ-6G2L3-7OT3O-ODZDC-K35HK-5KBF5' //这里填写自己申请的key
48.               });
49.               // 使用腾讯的逆地址解析
50.               qqmapsdk.reverseGeocoder({
51.                 location,
52.                 success(response) {
53.                   console.log("成功！",response.result)
54.                   let info = response.result;
55.                   console.log(info);
56.                   location.province = info.address_component.province;
57.                   location.city = info.address_component.city;
58.                   location.area = info.address_component.district;
59.                   location.street = info.address_component.street;
60.                   location.address = info.address;
61.                   location.formatted_addresses = info.formatted_addresses.standard_address
62.                   resolve(location);
63.                 },
64.               });
65.             },
66.             fail(err) {
67.               console.log(err)
68.               resolve(location);
69.             },
70.           });
71.         });
72.       }
73.     }
74.   }
75. </script>
77. <style scoped>
78.   .address{
79.     width: 50px;
80.     height: 50px;
81.     background-color: aqua;
82.   }
83. </style>

复制代码

8.为了防止不同步设置，在微信小程序开发者平台查抄一下，假如没有同步过来可以关了重新编译。

点击获取定位，可以或许乐成获取到定位信息。 

 具体返回的json文件可以点开这里检察生存下来，因为哀求的腾讯api每天的额度有上限（具体额度在下面有说明），双击打开生存下来可以参考使用。

9.可能存在位置发生偏移（禁绝确）的问题
我将获取到的经纬度拿去坐标拾取器里面复原位置是准确的，也就是说经纬度对应逆所在解析的位置是正确的，问题出现在获取到的经纬度禁绝确。综合来看，就是uni.getLocation的问题。

为此，检察了一下其它文章，在编辑器中获取的定位信息确实是有毛病，我这里就去真机调试了一番，我这里的结果是真机调试的位置误差小于100，而在编辑器中却是有2公里左右的误差。具体的办理方案有待讨论。 （比力菜，临时找不到方案办理）

10.存在真机调试getLocation报错
真机调试控制台窗口

我也是多次几次才乐成的！ （这个位置就比力准确）
 

报错的原因可能是：

也就是说30秒内仅一次有用。  
11. 调用额度说明
具体是这个模块

这里为接口分配额度，普通开发者只有最高每天10000的额度，升级为企业级会多一些。

调用了多少，可以在这里看到，这里主要使用逆所在解析接口：

 
以上就是使用腾讯地图进行定位的完整过程，其它方案假如有好的，也欢迎分享交流。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。