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

定位一直是一个让人头疼的问题，不是这个有问题就是那里有问题。这里结合我多方查找和实际运行，获得的一些经验给予分享。

怎么进行定位？基本流程是：

1.去腾讯位置服务的控制那里创建一个应用

腾讯位置服务 - 立足生态，连接未来 (qq.com)

2.添加一个key，并开通WebServiceAPI服务

这个key是到时候用来定位的标识（必要的）。开发的哪种就选择哪种就行。

3.下载微信jssdk（这里会用到逆地址解析等等）

微信小程序JavaScript SDK | 腾讯位置服务 (qq.com)

点击去下载其中之一即可。

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

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

小程序 (qq.com)

将这个域名添加进去

	
https://apis.map.qq.com

5.修改配置manifest.json文件

将位置接口勾选了

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

"permission" : {
            "scope.userLocation" : {
                "desc" : "为了您更好的体验，请确认获取您的位置信息"
            }
        },
        "requiredPrivateInfos" : [
            "getLocation",
            "chooseLocation",
            "onLocationChange",
            "startLocationUpdateBackground"
        ]

具体在这里下面添加： 

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

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

不过这里有个坑，这样导入会报错，我查阅了一下，使用require导入也不行，具体是这样操作之后就可以了。

找到刚才你下载的sdk源文件，打开它滑倒最下面，将

module.exports = QQMapWX;注释掉，换成

export default QQMapWX;

7.使用uni.getLocation获取经纬度信息给QQMapWX实例进行使用

uni.getLocation(OBJECT) | uni-app官网 (dcloud.net.cn)

uni.getLocation(OBJECT)

获取当前的地理位置、速度。

OBJECT 参数说明

success 返回参数说明

address 地址信息说明

示例

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.为了防止不同步配置，在微信小程序开发者平台检查一下，如果没有同步过来可以关了重新编译。

点击获取定位，能够成功获取到定位信息。 

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

9.可能存在位置发生偏移（不准确）的问题

我将获取到的经纬度拿去坐标拾取器里面复原位置是准确的，也就是说经纬度对应逆地址解析的位置是正确的，问题出现在获取到的经纬度不准确。综合来看，就是uni.getLocation的问题。

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

10.存在真机调试getLocation报错

真机调试控制台窗口

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

 

报错的原因可能是：

也就是说30秒内仅一次有效。  

11. 调用额度说明

具体是这个模块

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

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

 

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