uniapp开发小程序获取定位信息（腾讯地图）
定位一直是一个让人头疼的问题，不是这个有问题就是那里有问题。这里结合我多方查找和实际运行，得到的一些经验给予分享。怎么进行定位？根本流程是：
1.去腾讯位置服务的控制那里创建一个应用
腾讯位置服务 - 立足生态，连接未来 (qq.com)
https://img-blog.csdnimg.cn/direct/2089033b484b4c5986672ec111bd8b47.png
2.添加一个key，并开通WebServiceAPI服务
这个key是到时候用来定位的标识（须要的）。开发的哪种就选择哪种就行。
https://img-blog.csdnimg.cn/direct/c53f8ed2a02c43eeabf7688b77abff86.png
https://img-blog.csdnimg.cn/direct/bc8b5f324ca44335b2d33ac4c4cb4241.png
3.下载微信jssdk（这里会用到逆所在解析等等）
微信小程序JavaScript SDK | 腾讯位置服务 (qq.com)
点击去下载此中之一即可。
https://img-blog.csdnimg.cn/direct/bfd1a7490dd248a89ec83d8508973005.png
下载好后，我将它放在这个文件夹中进利用用，放在其它文件夹也行（不肯定跟我一样），看自己习惯，只要到时候导入路径写对。
https://img-blog.csdnimg.cn/direct/5ae4d5e84d53473cb830a1493cbe9879.png
4.去小程序后台管理开启安全域名
小程序 (qq.com)
https://img-blog.csdnimg.cn/direct/efe20695ef7c45a78ddc28058265c755.png
https://img-blog.csdnimg.cn/direct/73302cfc060f4969a375a324101544ca.png
将这个域名添加进去
https://apis.map.qq.com https://img-blog.csdnimg.cn/direct/1c679e0a2cfc42e4a1fa6a485be7dca6.png
5.修改设置manifest.json文件
将位置接口勾选了
https://img-blog.csdnimg.cn/direct/dca94f28f5ef49aa8ec82131a65389fc.png
还要修改其源码，将以下这段代码添加：
"permission" : {
"scope.userLocation" : {
"desc" : "为了您更好的体验，请确认获取您的位置信息"
}
},
"requiredPrivateInfos" : [
"getLocation",
"chooseLocation",
"onLocationChange",
"startLocationUpdateBackground"
] 具体在这里下面添加：
https://img-blog.csdnimg.cn/direct/7a275a3ccbba4dd2a8d13a738095d40d.png
6.在使用到的页面引入sdk
import QQMapWX from "../../common/qqmap-wx-jssdk.js" 不过这里有个坑，如许导入会报错，我查阅了一下，使用require导入也不可，具体是如许操纵之后就可以了。
找到刚才你下载的sdk源文件，打开它滑倒最下面，将
module.exports = QQMapWX;注释掉，换成
export default QQMapWX; https://img-blog.csdnimg.cn/direct/e383db2779aa4196952ff5f7b144c485.png
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 示例
uni.getLocation({
type: 'wgs84',
success: function (res) {
console.log('当前位置的经度：' + res.longitude);
console.log('当前位置的纬度：' + res.latitude);
}
}); 使用type:'gcj02 '会准确一些。
以下是完整demo代码，此中参考了这位老哥的文章【uniapp小程序实战】—— 使用腾讯地图获取定位_uniapp 腾讯地图-CSDN博客
<template>
<view class="content">
<view class="address" @click="getposition">
获取定位
</view>
当前的定位是:{{position}}
</view>
</template>
<script>
import QQMapWX from "../../common/qqmap-wx-jssdk.js"
export default {
data() {
return {
title: 'Hello',
position:''
}
},
methods: {
async getposition() {
const location = await this.getLocationInfo()
console.log("lo",location)
this.position = location.formatted_addresses
console.log("po",this.position)
},
async getLocationInfo() {
return new Promise((resolve) => {
let location = {
longitude: 0,
latitude: 0,
province: "",
city: "",
area: "",
street: "",
address: "",
formatted_addresses:""
};
// 使用uni.getLocation获取经纬度
uni.getLocation({
type: "gcj02",
isHighAccuracy: true,
success(res) {
location.longitude = res.longitude;
location.latitude = res.latitude;
// 创建实例
const qqmapsdk = new QQMapWX({
key: 'ONXBZ-6G2L3-7OT3O-ODZDC-K35HK-5KBF5' //这里填写自己申请的key
});
// 使用腾讯的逆地址解析
qqmapsdk.reverseGeocoder({
location,
success(response) {
console.log("成功！",response.result)
let info = response.result;
console.log(info);
location.province = info.address_component.province;
location.city = info.address_component.city;
location.area = info.address_component.district;
location.street = info.address_component.street;
location.address = info.address;
location.formatted_addresses = info.formatted_addresses.standard_address
resolve(location);
},
});
},
fail(err) {
console.log(err)
resolve(location);
},
});
});
}
}
}
</script>
<style scoped>
.address{
width: 50px;
height: 50px;
background-color: aqua;
}
</style>
8.为了防止不同步设置，在微信小程序开发者平台查抄一下，假如没有同步过来可以关了重新编译。
https://img-blog.csdnimg.cn/direct/cb0c7abba5ff4d7aa9474b76d29b7aa6.png
点击获取定位，可以或许乐成获取到定位信息。
https://img-blog.csdnimg.cn/direct/fb0b5a97acac4772a6b5075a5146b47d.png 具体返回的json文件可以点开这里检察生存下来，因为哀求的腾讯api每天的额度有上限（具体额度在下面有说明），双击打开生存下来可以参考使用。
https://img-blog.csdnimg.cn/direct/bb98350bf65b440fab7183ffb0a77cd8.png
9.可能存在位置发生偏移（禁绝确）的问题
我将获取到的经纬度拿去坐标拾取器里面复原位置是准确的，也就是说经纬度对应逆所在解析的位置是正确的，问题出现在获取到的经纬度禁绝确。综合来看，就是uni.getLocation的问题。
https://img-blog.csdnimg.cn/direct/c35a924bc4064a92bfaf51da170d1773.png
https://img-blog.csdnimg.cn/direct/7a665b466a204340883ba612a8595562.png
为此，检察了一下其它文章，在编辑器中获取的定位信息确实是有毛病，我这里就去真机调试了一番，我这里的结果是真机调试的位置误差小于100，而在编辑器中却是有2公里左右的误差。具体的办理方案有待讨论。 （比力菜，临时找不到方案办理）
https://img-blog.csdnimg.cn/direct/ce82821ac66f4091bf8c87f8a768fd8b.png
10.存在真机调试getLocation报错
真机调试控制台窗口
https://img-blog.csdnimg.cn/direct/ae466a58716b406a8459463d870db92c.png
我也是多次几次才乐成的！ （这个位置就比力准确）
https://img-blog.csdnimg.cn/direct/de6af5bed169445a9c22631a94a3c0ef.png
报错的原因可能是：
https://img-blog.csdnimg.cn/direct/a22a4535e73847da92b5da6fc6ac9fdc.png
也就是说30秒内仅一次有用。
11. 调用额度说明
具体是这个模块
https://img-blog.csdnimg.cn/direct/1ac6c1cc759f4d37aa80ad38ac361a53.png
这里为接口分配额度，普通开发者只有最高每天10000的额度，升级为企业级会多一些。
https://img-blog.csdnimg.cn/direct/585fdcfd9e4b475782ef1eef608b30a6.png
https://img-blog.csdnimg.cn/direct/ed78d884fb3a48079ee0234ed9cd410f.png
https://img-blog.csdnimg.cn/direct/7da3409048cf427db1341815e5545791.png
调用了多少，可以在这里看到，这里主要使用逆所在解析接口：
https://img-blog.csdnimg.cn/direct/9444b70bbeda4903a19a485c8c5faf22.png
以上就是使用腾讯地图进行定位的完整过程，其它方案假如有好的，也欢迎分享交流。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]