taro 获取用户地理位置信息、通过腾讯地图获取城市等信息

    科技2022-07-20  122

    1、在app.config.js中设置 "permission":{ "scope.userLocation":{ "desc": "获取地理位置信息的用途描述" } } 2、授权成功后,通过Taro.getLocation获取地理位置信息 Taro.getLocation({ type: 'wgs84', success: function (res) { console.log(res); } }) 配置参数: altitude 传入 true 会返回高度信息,由于获取高度需要较高精确度,会减慢接口返回速度 complete 接口调用结束的回调函数(调用成功、失败都会执行) fail 接口调用失败的回调函数 highAccuracyExpireTime 高精度定位超时时间(ms),指定时间内返回最高精度,该值3000ms以上高精度定位才有效果 isHighAccuracy 开启高精度定位 success 接口调用成功的回调函数 type wgs84 返回 gps 坐标,gcj02 返回可用于 Taro.openLocation 的坐标 回调函数的参数 accuracy 位置的精确度 altitude 高度,单位 m horizontalAccuracy 水平精度,单位 m latitude 纬度,范围为 -90~90,负数表示南纬 longitude 经度,范围为 -180~180,负数表示西经 speed 速度,单位 m/s verticalAccuracy 垂直精度,单位 m(Android 无法获取,返回 0) errMsg 调用结果 3、使用打开微信内置地图 Taro.openLocation({ latitude, 必传 longitude, 必传 address 地址的详细说明 complete 接口调用结束的回调函数(调用成功、失败都会执行) fail 接口调用失败的回调函数 name 位置名 scale 缩放比例,范围5~18 success 接口调用成功的回调函数 }) 4、用户在地图上自己选择位置 (1)在config/index.js中配置 defineConstants: { LOCATION_APIKEY: JSON.stringify('腾讯地图密钥') } (2)打开地图选定位置 Taro.chooseLocation({ complete 接口调用结束的回调函数(调用成功、失败都会执行) fail 接口调用失败的回调函数 latitude 目标地纬度,不传为当前位置 longitude 目标地经度,不传为当前位置 success(res) { ... } }) 5、使用腾讯地图获取地址等信息 Taro.getLocation({ type: 'gcj02', //返回可以用于 Taro.openLocation的经纬度 success: function (res) { const latitude = res.latitude const longitude = res.longitude //下载qqmap-wx-jssdk,然后引入其中的js文件 var QQMapWX = require('../..//utils/sdk/qqmap-wx-jssdk.min.js'); var qqmapsdk = new QQMapWX({ key: '腾讯地图开发者密钥' // 必填 }); //逆地址解析,通过经纬度获取位置等信息 qqmapsdk.reverseGeocoder({ location:{latitude,longitude}, success: function(res){ 获取当前城市 console.log(res.result.address_component.city); 具体参数查看 https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodReverseGeocoder } }) } })

    代码示例:

    Taro.getLocation({ type: 'gcj02', //返回可以用于 Taro.openLocation的经纬度 success: function (res) { const latitude = res.latitude const longitude = res.longitude Taro.openLocation({ latitude, longitude, scale: 18 }) } })

    逆地址解析代码示例:

    Taro.getLocation({ type: 'gcj02', //返回可以用于 Taro.openLocation的经纬度 success: function (res) { const latitude = res.latitude const longitude = res.longitude var QQMapWX = require('../..//utils/sdk/qqmap-wx-jssdk.min.js'); var qqmapsdk = new QQMapWX({ key: 'xx' // 必填 }); console.log(latitude,longitude); qqmapsdk.reverseGeocoder({ location:{latitude,longitude}, success: function(res){ console.log(res.result.address_component.city); } }) } })
    Processed: 0.011, SQL: 8