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

04-08 1178阅读

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

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

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 参数说明

参数名	类型	必填	说明	平台差异说明
type	String	否	默认为 wgs84 返回 gps 坐标，gcj02 返回国测局坐标，可用于 uni.openLocation 和 map 组件坐标，App 和 H5 需配置定位 SDK 信息才可支持 gcj02。
altitude	Boolean	否	传入 true 会返回高度信息，由于获取高度需要较高精确度，会减慢接口返回速度	抖音小程序、飞书小程序、支付宝小程序不支持
geocode	Boolean	否	默认false，是否解析地址信息	仅App平台支持（安卓需指定 type 为 gcj02 并配置三方定位SDK）
highAccuracyExpireTime	Number	否	高精度定位超时时间(ms)，指定时间内返回最高精度，该值3000ms以上高精度定位才有效果	App (3.2.11+)、H5 (3.2.11+)、微信小程序 (基础库 2.9.0+)
timeout	String	否	默认为 5，定位超时时间，单位秒	仅飞书小程序支持
cacheTimeout	Number	否	定位缓存超时时间，单位秒；每次定位缓存当前定位数据，并记下时间戳，当下次调用在cacheTimeout之内时，返回缓存数据	仅飞书小程序、支付宝小程序支持
accuracy	String	否	默认为 high，指定期望精度，支持 high，best。当指定 high 时，期望精度值为100m，当指定 best 时期望精度值为20m。当定位得到的精度不符合条件时，在timeout之前会继续定位，尝试拿到符合要求的定位结果	仅飞书小程序支持
isHighAccuracy	Boolean	否	开启高精度定位	App (3.4.0+)、H5 (3.4.0+)、微信小程序 (基础库 2.9.0+)
success	Function	是	接口调用成功的回调函数，返回内容详见返回参数说明。
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

success 返回参数说明

参数	说明
latitude	纬度，浮点数，范围为-90~90，负数表示南纬
longitude	经度，浮点数，范围为-180~180，负数表示西经
speed	速度，浮点数，单位m/s
accuracy	位置的精确度
altitude	高度，单位 m
verticalAccuracy	垂直精度，单位 m（Android 无法获取，返回 0）
horizontalAccuracy	水平精度，单位 m
address	地址信息（仅App端支持，需配置geocode为true）

address 地址信息说明

属性	类型	描述	说明
country	String	国家	如“中国”，如果无法获取此信息则返回undefined
province	String	省份名称	如“北京市”，如果无法获取此信息则返回undefined
city	String	城市名称	如“北京市”，如果无法获取此信息则返回undefined
district	String	区（县）名称	如“朝阳区”，如果无法获取此信息则返回undefined
street	String	街道信息	如“酒仙桥路”，如果无法获取此信息则返回undefined
streetNum	String	获取街道门牌号信息	如“3号”，如果无法获取此信息则返回undefined
poiName	String	POI信息	如“电子城．国际电子总部”，如果无法获取此信息则返回undefined
postalCode	String	邮政编码	如“100016”，如果无法获取此信息则返回undefined
cityCode	String	城市代码	如“010”，如果无法获取此信息则返回undefined

示例

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

使用type:'gcj02 '会准确一些。

以下是完整demo代码，其中参考了这位老哥的文章【uniapp小程序实战】—— 使用腾讯地图获取定位_uniapp 腾讯地图-CSDN博客

  
    
      获取定位
    
    当前的定位是:{{position}}
  


  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);
            },
          });
        });
      }
    }
  }


  .address{
    width: 50px;
    height: 50px;
    background-color: aqua;
  }

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