ToB企服应用市场:ToB评测及商务社交产业平台

标题: uniapp开发小程序获取定位信息（腾讯地图） [打印本页]
作者: 泉缘泉    时间: 2024-6-11 10:19
标题: 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企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4