• uni-app 使用uni.getLocation获取经纬度配合腾讯地图api获取当前地址

    前言

    • 最近在开发中需要根据经纬度获取当前位置信息，传递给后端，用来回显显示当前位置

    • 查阅uni-app文档，发现uni.getLocation () 可以获取到经纬度，但是在小程序环境没有地址信息

    • 思考怎么把经纬度换成地址，如果经纬度是key，那地址就是value，第三方地图就是数据库

    • 所以我们只要使用uni.getLocation （）获取经纬度配合地图api就可以解决这个需求

    报错情况-对应解决办法

    报错一：没有在用户隐私指引中获取当前位置权限
    报错二："errMsg": "getLocation:fail fail:require permission desc"
    解决方案：在manifest.json-微信小程序配置-位置接口打勾-填写用途

    或者直接源码视图-小程序直接配置如下代码
    1. "permission" : {
    2.             "scope.userLocation" : {
    3.                 "desc" : "真实用途"
    4.             }
    5.  }
    报错三：ferrMsg: "getlocation;fail the api heed to be declared in the requiredprivateInfosfield in app.json/ext.json"
    解决方案：小程序源码视图添加如下代码
    "requiredPrivateInfos" : [ "getLocation" ],
    总结：

    • 报错一是因为微信小程序官方最近必须对相应api进行权限申请，询问用户。

    • 报错二是询问用户是否愿意获取当前位置信息

    • 报错三是用户同意之后，使用相关8个地理位置相关接口时，需要声明该字段，否则将无法正常使用

    • 一般用户隐私指引没问题，报错二三使用勾选方式，就会在源码视图帮我们生成对应代码，不会有问题

    uni.getLocation （）为什么获取不到位置信息

    • 官方文档说的很清楚，只用在APP环境下，这个api才会有位置信息，小程序环境只有经纬度

    为什么使用腾讯地图配合uni.getLocation （）来实现

    • 因为uni-app提供的官方地图就是腾讯地图

    • 并且uni.getLocation （）的type='gcz02'时经纬度在腾讯地图可以直接使用

    • 并不是只能用腾讯地图，而是只是获取一个位置信息，这样使用更方便省去很多麻烦

    代码实现

    1.在腾讯地图注册账号，获取key，下载SDK参考文章：uni-app 小程序使用腾讯地图完成搜索功能

    高德地图原生SDK：微信小程序JavaScript SDK | 腾讯位置服务

    SDK可以随便下一个

    2.在uni-app/utils/建立tenxun文件夹/下面放我们下载sdk文件( qqmap-wx-jssdk.js)代码如下
    1. /**
    2.  * 微信小程序JavaScriptSDK
    3.  * 
    4.  * @version 1.1
    5.  * @date 2019-01-20
    6.  */
    7. ​
    8. var ERROR_CONF = {
    9.     KEY_ERR: 311,
    10.     KEY_ERR_MSG: 'key格式错误',
    11.     PARAM_ERR: 310,
    12.     PARAM_ERR_MSG: '请求参数信息有误',
    13.     SYSTEM_ERR: 600,
    14.     SYSTEM_ERR_MSG: '系统错误',
    15.     WX_ERR_CODE: 1000,
    16.     WX_OK_CODE: 200
    17. };
    18. var BASE_URL = 'https://apis.map.qq.com/ws/';
    19. var URL_SEARCH = BASE_URL + 'place/v1/search';
    20. var URL_SUGGESTION = BASE_URL + 'place/v1/suggestion';
    21. var URL_GET_GEOCODER = BASE_URL + 'geocoder/v1/';
    22. var URL_CITY_LIST = BASE_URL + 'district/v1/list';
    23. var URL_AREA_LIST = BASE_URL + 'district/v1/getchildren';
    24. var URL_DISTANCE = BASE_URL + 'distance/v1/';
    25. var EARTH_RADIUS = 6378136.49;
    26. var Utils = {
    27.     /**
    28.      * 得到终点query字符串
    29.      * @param {Array|String} 检索数据
    30.      */
    31.     location2query(data) {
    32.         if (typeof data == 'string') {
    33.             return data;
    34.         }
    35.         var query = '';
    36.         for (var i = 0; i < data.length; i++) {
    37.             var d = data[i];
    38.             if (!!query) {
    39.                 query += ';';
    40.             }
    41.             if (d.location) {
    42.                 query = query + d.location.lat + ',' + d.location.lng;
    43.             }
    44.             if (d.latitude && d.longitude) {
    45.                 query = query + d.latitude + ',' + d.longitude;
    46.             }
    47.         }
    48.         return query;
    49.     },
    50. ​
    51.     /**
    52.      * 计算角度
    53.      */
    54.     rad(d) {
    55.       return d * Math.PI / 180.0;
    56.     },  
    57.     /**
    58.      * 处理终点location数组
    59.      * @return 返回终点数组
    60.      */
    61.     getEndLocation(location){
    62.       var to = location.split(';');
    63.       var endLocation = [];
    64.       for (var i = 0; i < to.length; i++) {
    65.         endLocation.push({
    66.           lat: parseFloat(to[i].split(',')[0]),
    67.           lng: parseFloat(to[i].split(',')[1])
    68.         })
    69.       }
    70.       return endLocation;
    71.     },
    72. ​
    73.     /**
    74.      * 计算两点间直线距离
    75.      * @param a 表示纬度差
    76.      * @param b 表示经度差
    77.      * @return 返回的是距离，单位m
    78.      */
    79.     getDistance(latFrom, lngFrom, latTo, lngTo) {
    80.       var radLatFrom = this.rad(latFrom);
    81.       var radLatTo = this.rad(latTo);
    82.       var a = radLatFrom - radLatTo;
    83.       var b = this.rad(lngFrom) - this.rad(lngTo);
    84.       var distance = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLatFrom) * Math.cos(radLatTo) * Math.pow(Math.sin(b / 2), 2)));
    85.       distance = distance * EARTH_RADIUS;
    86.       distance = Math.round(distance * 10000) / 10000;
    87.       return parseFloat(distance.toFixed(0));
    88.     },
    89.     /**
    90.      * 使用微信接口进行定位
    91.      */
    92.     getWXLocation(success, fail, complete) {
    93.         wx.getLocation({
    94.             type: 'gcj02',
    95.             success: success,
    96.             fail: fail,
    97.             complete: complete
    98.         });
    99.     },
    100. ​
    101.     /**
    102.      * 获取location参数
    103.      */
    104.     getLocationParam(location) {
    105.         if (typeof location == 'string') {
    106.             var locationArr = location.split(',');
    107.             if (locationArr.length === 2) {
    108.                 location = {
    109.                     latitude: location.split(',')[0],
    110.                     longitude: location.split(',')[1]
    111.                 };
    112.             } else {
    113.                 location = {};
    114.             }
    115.         }
    116.         return location;
    117.     },
    118. ​
    119.     /**
    120.      * 回调函数默认处理
    121.      */
    122.     polyfillParam(param) {
    123.         param.success = param.success || function () { };
    124.         param.fail = param.fail || function () { };
    125.         param.complete = param.complete || function () { };
    126.     },
    127. ​
    128.     /**
    129.      * 验证param对应的key值是否为空
    130.      * 
    131.      * @param {Object} param 接口参数
    132.      * @param {String} key 对应参数的key
    133.      */
    134.     checkParamKeyEmpty(param, key) {
    135.         if (!param[key]) {
    136.             var errconf = this.buildErrorConfig(ERROR_CONF.PARAM_ERR, ERROR_CONF.PARAM_ERR_MSG + key +'参数格式有误');
    137.             param.fail(errconf);
    138.             param.complete(errconf);
    139.             return true;
    140.         }
    141.         return false;
    142.     },
    143. ​
    144.     /**
    145.      * 验证参数中是否存在检索词keyword
    146.      * 
    147.      * @param {Object} param 接口参数
    148.      */
    149.     checkKeyword(param){
    150.         return !this.checkParamKeyEmpty(param, 'keyword');
    151.     },
    152. ​
    153.     /**
    154.      * 验证location值
    155.      * 
    156.      * @param {Object} param 接口参数
    157.      */
    158.     checkLocation(param) {
    159.         var location = this.getLocationParam(param.location);
    160.         if (!location || !location.latitude || !location.longitude) {
    161.             var errconf = this.buildErrorConfig(ERROR_CONF.PARAM_ERR, ERROR_CONF.PARAM_ERR_MSG + ' location参数格式有误');
    162.             param.fail(errconf);
    163.             param.complete(errconf);
    164.             return false;
    165.         }
    166.         return true;
    167.     },
    168. ​
    169.     /**
    170.      * 构造错误数据结构
    171.      * @param {Number} errCode 错误码
    172.      * @param {Number} errMsg 错误描述
    173.      */
    174.     buildErrorConfig(errCode, errMsg) {
    175.         return {
    176.             status: errCode,
    177.             message: errMsg
    178.         };
    179.     },
    180. ​
    181.     /**
    182.      * 
    183.      * 数据处理函数
    184.      * 根据传入参数不同处理不同数据
    185.      * @param {String} feature 功能名称
    186.      * search 地点搜索
    187.      * suggest关键词提示
    188.      * reverseGeocoder逆地址解析
    189.      * geocoder地址解析
    190.      * getCityList获取城市列表：父集
    191.      * getDistrictByCityId获取区县列表：子集
    192.      * calculateDistance距离计算
    193.      * @param {Object} param 接口参数
    194.      * @param {Object} data 数据
    195.      */
    196.     handleData(param,data,feature){
    197.       if (feature === 'search') {
    198.         var searchResult = data.data;
    199.         var searchSimplify = [];
    200.         for (var i = 0; i < searchResult.length; i++) {
    201.           searchSimplify.push({
    202.             id: searchResult[i].id || null,
    203.             title: searchResult[i].title || null,
    204.             latitude: searchResult[i].location && searchResult[i].location.lat || null,
    205.             longitude: searchResult[i].location && searchResult[i].location.lng || null,
    206.             address: searchResult[i].address || null,
    207.             category: searchResult[i].category || null,
    208.             tel: searchResult[i].tel || null,
    209.             adcode: searchResult[i].ad_info && searchResult[i].ad_info.adcode || null,
    210.             city: searchResult[i].ad_info && searchResult[i].ad_info.city || null,
    211.             district: searchResult[i].ad_info && searchResult[i].ad_info.district || null,
    212.             province: searchResult[i].ad_info && searchResult[i].ad_info.province || null
    213.           })
    214.         }
    215.         param.success(data, {
    216.           searchResult: searchResult,
    217.           searchSimplify: searchSimplify
    218.         })
    219.       } else if (feature === 'suggest') {
    220.         var suggestResult = data.data;
    221.         var suggestSimplify = [];
    222.         for (var i = 0; i < suggestResult.length; i++) {
    223.           suggestSimplify.push({
    224.             adcode: suggestResult[i].adcode || null,
    225.             address: suggestResult[i].address || null,
    226.             category: suggestResult[i].category || null,
    227.             city: suggestResult[i].city || null,
    228.             district: suggestResult[i].district || null,
    229.             id: suggestResult[i].id || null,
    230.             latitude: suggestResult[i].location && suggestResult[i].location.lat || null,
    231.             longitude: suggestResult[i].location && suggestResult[i].location.lng || null,
    232.             province: suggestResult[i].province || null,
    233.             title: suggestResult[i].title || null,
    234.             type: suggestResult[i].type || null
    235.           })
    236.         }
    237.         param.success(data, {
    238.           suggestResult: suggestResult,
    239.           suggestSimplify: suggestSimplify
    240.           })
    241.       } else if (feature === 'reverseGeocoder') {
    242.         var reverseGeocoderResult = data.result;
    243.         var reverseGeocoderSimplify = {
    244.           address: reverseGeocoderResult.address || null,
    245.           latitude: reverseGeocoderResult.location && reverseGeocoderResult.location.lat || null,
    246.           longitude: reverseGeocoderResult.location && reverseGeocoderResult.location.lng || null,
    247.           adcode: reverseGeocoderResult.ad_info && reverseGeocoderResult.ad_info.adcode || null,
    248.           city: reverseGeocoderResult.address_component && reverseGeocoderResult.address_component.city || null,
    249.           district: reverseGeocoderResult.address_component && reverseGeocoderResult.address_component.district || null,
    250.           nation: reverseGeocoderResult.address_component && reverseGeocoderResult.address_component.nation || null,
    251.           province: reverseGeocoderResult.address_component && reverseGeocoderResult.address_component.province || null,
    252.           street: reverseGeocoderResult.address_component && reverseGeocoderResult.address_component.street || null,
    253.           street_number: reverseGeocoderResult.address_component && reverseGeocoderResult.address_component.street_number || null,
    254.           recommend: reverseGeocoderResult.formatted_addresses && reverseGeocoderResult.formatted_addresses.recommend || null,
    255.           rough: reverseGeocoderResult.formatted_addresses && reverseGeocoderResult.formatted_addresses.rough || null
    256.         };
    257.         if (reverseGeocoderResult.pois) {//判断是否返回周边poi
    258.           var pois = reverseGeocoderResult.pois;
    259.           var poisSimplify = [];
    260.           for (var i = 0;i < pois.length;i++) {
    261.             poisSimplify.push({
    262.               id: pois[i].id || null,
    263.               title: pois[i].title || null,
    264.               latitude: pois[i].location && pois[i].location.lat || null,
    265.               longitude: pois[i].location && pois[i].location.lng || null,
    266.               address: pois[i].address || null,
    267.               category: pois[i].category || null,
    268.               adcode: pois[i].ad_info && pois[i].ad_info.adcode || null,
    269.               city: pois[i].ad_info && pois[i].ad_info.city || null,
    270.               district: pois[i].ad_info && pois[i].ad_info.district || null,
    271.               province: pois[i].ad_info && pois[i].ad_info.province || null
    272.             })
    273.           }
    274.           param.success(data,{
    275.             reverseGeocoderResult: reverseGeocoderResult,
    276.             reverseGeocoderSimplify: reverseGeocoderSimplify,
    277.             pois: pois,
    278.             poisSimplify: poisSimplify
    279.           })
    280.         } else {
    281.           param.success(data, {
    282.             reverseGeocoderResult: reverseGeocoderResult,
    283.             reverseGeocoderSimplify: reverseGeocoderSimplify
    284.           })
    285.         }
    286.       } else if (feature === 'geocoder') {
    287.         var geocoderResult = data.result;
    288.         var geocoderSimplify = {
    289.           title: geocoderResult.title || null,
    290.           latitude: geocoderResult.location && geocoderResult.location.lat || null,
    291.           longitude: geocoderResult.location && geocoderResult.location.lng || null,
    292.           adcode: geocoderResult.ad_info && geocoderResult.ad_info.adcode || null,
    293.           province: geocoderResult.address_components && geocoderResult.address_components.province || null,
    294.           city: geocoderResult.address_components && geocoderResult.address_components.city || null,
    295.           district: geocoderResult.address_components && geocoderResult.address_components.district || null,
    296.           street: geocoderResult.address_components && geocoderResult.address_components.street || null,
    297.           street_number: geocoderResult.address_components && geocoderResult.address_components.street_number || null,
    298.           level: geocoderResult.level || null
    299.         };
    300.         param.success(data,{
    301.           geocoderResult: geocoderResult,
    302.           geocoderSimplify: geocoderSimplify
    303.         });
    304.       } else if (feature === 'getCityList') {
    305.         var provinceResult = data.result[0];
    306.         var cityResult = data.result[1];
    307.         var districtResult = data.result[2];
    308.         param.success(data,{
    309.           provinceResult: provinceResult,
    310.           cityResult: cityResult,
    311.           districtResult: districtResult
    312.         });
    313.       } else if (feature === 'getDistrictByCityId') {
    314.         var districtByCity = data.result[0];
    315.         param.success(data, districtByCity);
    316.       } else if (feature === 'calculateDistance') {
    317.         var calculateDistanceResult = data.result.elements;  
    318.         var distance = [];
    319.         for (var i = 0; i < calculateDistanceResult.length; i++){
    320.           distance.push(calculateDistanceResult[i].distance);
    321.         }   
    322.         param.success(data, {
    323.           calculateDistanceResult: calculateDistanceResult,
    324.           distance: distance
    325.           });
    326.       } else {
    327.         param.success(data);
    328.       }
    329.     },
    330. ​
    331.     /**
    332.      * 构造微信请求参数，公共属性处理
    333.      * 
    334.      * @param {Object} param 接口参数
    335.      * @param {Object} param 配置项
    336.      * @param {String} feature 方法名
    337.      */
    338.     buildWxRequestConfig(param, options, feature) {
    339.         var that = this;
    340.         options.header = { "content-type": "application/json" };
    341.         options.method = 'GET';
    342.         options.success = function (res) {
    343.             var data = res.data;
    344.             if (data.status === 0) {
    345.               that.handleData(param, data, feature);
    346.             } else {
    347.                 param.fail(data);
    348.             }
    349.         };
    350.         options.fail = function (res) {
    351.             res.statusCode = ERROR_CONF.WX_ERR_CODE;
    352.             param.fail(that.buildErrorConfig(ERROR_CONF.WX_ERR_CODE, res.errMsg));
    353.         };
    354.         options.complete = function (res) {
    355.             var statusCode = +res.statusCode;
    356.             switch(statusCode) {
    357.                 case ERROR_CONF.WX_ERR_CODE: {
    358.                     param.complete(that.buildErrorConfig(ERROR_CONF.WX_ERR_CODE, res.errMsg));
    359.                     break;
    360.                 }
    361.                 case ERROR_CONF.WX_OK_CODE: {
    362.                     var data = res.data;
    363.                     if (data.status === 0) {
    364.                         param.complete(data);
    365.                     } else {
    366.                         param.complete(that.buildErrorConfig(data.status, data.message));
    367.                     }
    368.                     break;
    369.                 }
    370.                 default:{
    371.                     param.complete(that.buildErrorConfig(ERROR_CONF.SYSTEM_ERR, ERROR_CONF.SYSTEM_ERR_MSG));
    372.                 }
    373. ​
    374.             }
    375.         };
    376.         return options;
    377.     },
    378. ​
    379.     /**
    380.      * 处理用户参数是否传入坐标进行不同的处理
    381.      */
    382.     locationProcess(param, locationsuccess, locationfail, locationcomplete) {
    383.         var that = this;
    384.         locationfail = locationfail || function (res) {
    385.             res.statusCode = ERROR_CONF.WX_ERR_CODE;
    386.             param.fail(that.buildErrorConfig(ERROR_CONF.WX_ERR_CODE, res.errMsg));
    387.         };
    388.         locationcomplete = locationcomplete || function (res) {
    389.             if (res.statusCode == ERROR_CONF.WX_ERR_CODE) {
    390.                 param.complete(that.buildErrorConfig(ERROR_CONF.WX_ERR_CODE, res.errMsg));
    391.             }
    392.         };
    393.         if (!param.location) {
    394.             that.getWXLocation(locationsuccess, locationfail, locationcomplete);
    395.         } else if (that.checkLocation(param)) {
    396.             var location = Utils.getLocationParam(param.location);
    397.             locationsuccess(location);
    398.         }
    399.     }
    400. };
    401. ​
    402. ​
    403. class QQMapWX {
    404. ​
    405.     /**
    406.      * 构造函数
    407.      * 
    408.      * @param {Object} options 接口参数,key 为必选参数
    409.      */
    410.     constructor(options) {
    411.         if (!options.key) {
    412.             throw Error('key值不能为空');
    413.         }
    414.         this.key = options.key;
    415.     };
    416. ​
    417.     /**
    418.      * POI周边检索
    419.      *
    420.      * @param {Object} options 接口参数对象
    421.      * 
    422.      * 参数对象结构可以参考
    423.      * @see http://lbs.qq.com/webservice_v1/guide-search.html
    424.      */
    425.     search(options) {
    426.         var that = this;
    427.         options = options || {};
    428. ​
    429.         Utils.polyfillParam(options);
    430. ​
    431.         if (!Utils.checkKeyword(options)) {
    432.             return;
    433.         }
    434. ​
    435.         var requestParam = {
    436.             keyword: options.keyword,
    437.             orderby: options.orderby || '_distance',
    438.             page_size: options.page_size || 10,
    439.             page_index: options.page_index || 1,
    440.             output: 'json',
    441.             key: that.key
    442.         };
    443. ​
    444.         if (options.address_format) {
    445.             requestParam.address_format = options.address_format;
    446.         }
    447. ​
    448.         if (options.filter) {
    449.             requestParam.filter = options.filter;
    450.         }
    451. ​
    452.         var distance = options.distance || "1000";
    453.         var auto_extend = options.auto_extend || 1;
    454.         var region = null;
    455.         var rectangle = null;
    456. ​
    457.         //判断城市限定参数
    458.         if (options.region) {
    459.           region = options.region;
    460.         }
    461. ​
    462.         //矩形限定坐标(暂时只支持字符串格式)
    463.         if (options.rectangle) {
    464.           rectangle = options.rectangle;
    465.         }
    466. ​
    467.         var locationsuccess = function (result) {        
    468.           if (region && !rectangle) {
    469.             //城市限定参数拼接
    470.             requestParam.boundary = "region(" + region + "," + auto_extend + "," + result.latitude + "," + result.longitude + ")";
    471.           } else if (rectangle && !region) {
    472.             //矩形搜索
    473.             requestParam.boundary = "rectangle(" + rectangle + ")";
    474.             } else {
    475.               requestParam.boundary = "nearby(" + result.latitude + "," + result.longitude + "," + distance + "," + auto_extend + ")";
    476.             }            
    477.             wx.request(Utils.buildWxRequestConfig(options, {
    478.                 url: URL_SEARCH,
    479.                 data: requestParam
    480.             }, 'search'));
    481.         };
    482.         Utils.locationProcess(options, locationsuccess);
    483.     };
    484. ​
    485.     /**
    486.      * sug模糊检索
    487.      *
    488.      * @param {Object} options 接口参数对象
    489.      * 
    490.      * 参数对象结构可以参考
    491.      * http://lbs.qq.com/webservice_v1/guide-suggestion.html
    492.      */
    493.     getSuggestion(options) {
    494.         var that = this;
    495.         options = options || {};
    496.         Utils.polyfillParam(options);
    497. ​
    498.         if (!Utils.checkKeyword(options)) {
    499.             return;
    500.         }
    501. ​
    502.         var requestParam = {
    503.             keyword: options.keyword,
    504.             region: options.region || '全国',
    505.             region_fix: options.region_fix || 0,
    506.             policy: options.policy || 0,
    507.             page_size: options.page_size || 10,//控制显示条数
    508.             page_index: options.page_index || 1,//控制页数
    509.             get_subpois : options.get_subpois || 0,//返回子地点
    510.             output: 'json',
    511.             key: that.key
    512.         };
    513.         //长地址
    514.         if (options.address_format) {
    515.           requestParam.address_format = options.address_format;
    516.         }
    517.         //过滤
    518.         if (options.filter) {
    519.           requestParam.filter = options.filter;
    520.         }
    521.         //排序
    522.         if (options.location) {
    523.           var locationsuccess = function (result) {
    524.             requestParam.location = result.latitude + ',' + result.longitude;
    525.             wx.request(Utils.buildWxRequestConfig(options, {
    526.               url: URL_SUGGESTION,
    527.               data: requestParam
    528.             }, "suggest"));      
    529.           };
    530.           Utils.locationProcess(options, locationsuccess);
    531.         } else {
    532.           wx.request(Utils.buildWxRequestConfig(options, {
    533.             url: URL_SUGGESTION,
    534.             data: requestParam
    535.           }, "suggest"));      
    536.         } 
    537.     };
    538. ​
    539.     /**
    540.      * 逆地址解析
    541.      *
    542.      * @param {Object} options 接口参数对象
    543.      * 
    544.      * 请求参数结构可以参考
    545.      * http://lbs.qq.com/webservice_v1/guide-gcoder.html
    546.      */
    547.     reverseGeocoder(options) {
    548.         var that = this;
    549.         options = options || {};
    550.         Utils.polyfillParam(options);
    551.         var requestParam = {
    552.             coord_type: options.coord_type || 5,
    553.             get_poi: options.get_poi || 0,
    554.             output: 'json',
    555.             key: that.key
    556.         };
    557.         if (options.poi_options) {
    558.             requestParam.poi_options = options.poi_options
    559.         }
    560. ​
    561.         var locationsuccess = function (result) {
    562.             requestParam.location = result.latitude + ',' + result.longitude;
    563.             wx.request(Utils.buildWxRequestConfig(options, {
    564.                 url: URL_GET_GEOCODER,
    565.                 data: requestParam
    566.             }, 'reverseGeocoder'));
    567.         };
    568.         Utils.locationProcess(options, locationsuccess);
    569.     };
    570. ​
    571.     /**
    572.      * 地址解析
    573.      *
    574.      * @param {Object} options 接口参数对象
    575.      * 
    576.      * 请求参数结构可以参考
    577.      * http://lbs.qq.com/webservice_v1/guide-geocoder.html
    578.      */
    579.     geocoder(options) {
    580.         var that = this;
    581.         options = options || {};
    582.         Utils.polyfillParam(options);
    583. ​
    584.         if (Utils.checkParamKeyEmpty(options, 'address')) {
    585.             return;
    586.         }
    587. ​
    588.         var requestParam = {
    589.             address: options.address,
    590.             output: 'json',
    591.             key: that.key
    592.         };
    593. ​
    594.         //城市限定
    595.         if (options.region) {
    596.           requestParam.region = options.region;
    597.         }
    598. ​
    599.         wx.request(Utils.buildWxRequestConfig(options, {
    600.             url: URL_GET_GEOCODER,
    601.             data: requestParam
    602.         },'geocoder'));
    603.     };
    604. ​
    605. ​
    606.     /**
    607.      * 获取城市列表
    608.      *
    609.      * @param {Object} options 接口参数对象
    610.      * 
    611.      * 请求参数结构可以参考
    612.      * http://lbs.qq.com/webservice_v1/guide-region.html
    613.      */
    614.     getCityList(options) {
    615.         var that = this;
    616.         options = options || {};
    617.         Utils.polyfillParam(options);
    618.         var requestParam = {
    619.             output: 'json',
    620.             key: that.key
    621.         };
    622. ​
    623.         wx.request(Utils.buildWxRequestConfig(options, {
    624.             url: URL_CITY_LIST,
    625.             data: requestParam
    626.         },'getCityList'));
    627.     };
    628. ​
    629.     /**
    630.      * 获取对应城市ID的区县列表
    631.      *
    632.      * @param {Object} options 接口参数对象
    633.      * 
    634.      * 请求参数结构可以参考
    635.      * http://lbs.qq.com/webservice_v1/guide-region.html
    636.      */
    637.     getDistrictByCityId(options) {
    638.         var that = this;
    639.         options = options || {};
    640.         Utils.polyfillParam(options);
    641. ​
    642.         if (Utils.checkParamKeyEmpty(options, 'id')) {
    643.             return;
    644.         }
    645. ​
    646.         var requestParam = {
    647.             id: options.id || '',
    648.             output: 'json',
    649.             key: that.key
    650.         };
    651. ​
    652.         wx.request(Utils.buildWxRequestConfig(options, {
    653.             url: URL_AREA_LIST,
    654.             data: requestParam
    655.         },'getDistrictByCityId'));
    656.     };
    657. ​
    658.     /**
    659.      * 用于单起点到多终点的路线距离(非直线距离)计算：
    660.      * 支持两种距离计算方式：步行和驾车。
    661.      * 起点到终点最大限制直线距离10公里。
    662.      *
    663.      * 新增直线距离计算。
    664.      * 
    665.      * @param {Object} options 接口参数对象
    666.      * 
    667.      * 请求参数结构可以参考
    668.      * http://lbs.qq.com/webservice_v1/guide-distance.html
    669.      */
    670.     calculateDistance(options) {
    671.         var that = this;
    672.         options = options || {};
    673.         Utils.polyfillParam(options);
    674. ​
    675.         if (Utils.checkParamKeyEmpty(options, 'to')) {
    676.             return;
    677.         }
    678. ​
    679.         var requestParam = {
    680.             mode: options.mode || 'walking',
    681.             to: Utils.location2query(options.to),
    682.             output: 'json',
    683.             key: that.key
    684.         };
    685. ​
    686.         if (options.from) {
    687.           options.location = options.from;
    688.         }
    689. ​
    690.         //计算直线距离
    691.         if(requestParam.mode == 'straight'){        
    692.           var locationsuccess = function (result) {
    693.             var locationTo = Utils.getEndLocation(requestParam.to);//处理终点坐标
    694.             var data = {
    695.               message:"query ok",
    696.               result:{
    697.                 elements:[]
    698.               },
    699.               status:0
    700.             };
    701.             for (var i = 0; i < locationTo.length; i++) {
    702.               data.result.elements.push({//将坐标存入
    703.                 distance: Utils.getDistance(result.latitude, result.longitude, locationTo[i].lat, locationTo[i].lng),
    704.                 duration:0,
    705.                 from:{
    706.                   lat: result.latitude,
    707.                   lng:result.longitude
    708.                 },
    709.                 to:{
    710.                   lat: locationTo[i].lat,
    711.                   lng: locationTo[i].lng
    712.                 }
    713.               });            
    714.             }
    715.             var calculateResult = data.result.elements;
    716.             var distanceResult = [];
    717.             for (var i = 0; i < calculateResult.length; i++) {
    718.               distanceResult.push(calculateResult[i].distance);
    719.             }  
    720.             return options.success(data,{
    721.               calculateResult: calculateResult,
    722.               distanceResult: distanceResult
    723.             });
    724.           };
    725.           
    726.           Utils.locationProcess(options, locationsuccess);
    727.         } else {
    728.           var locationsuccess = function (result) {
    729.             requestParam.from = result.latitude + ',' + result.longitude;
    730.             wx.request(Utils.buildWxRequestConfig(options, {
    731.               url: URL_DISTANCE,
    732.               data: requestParam
    733.             },'calculateDistance'));
    734.           };
    735. ​
    736.           Utils.locationProcess(options, locationsuccess);
    737.         }      
    738.     }
    739. };
    740. ​
    741. module.exports = QQMapWX;
    3.在需要获取位置信息页面引入使用
    3.1引入文件sdk
    import QQMapWX from "@/utils/tenxun/qqmap-wx-jssdk.js"
    3.2 获取位置信息方法-复制要填写key，里面有各种信息，根据需求看打印信息
    1. // 获取位置信息
    2.             async getLocationInfo() {
    3.                 //获取位置信息
    4.                 return new Promise((resolve) => {
    5.                     //位置信息默认数据
    6.                     let location = {
    7.                         longitude: 0,
    8.                         latitude: 0,
    9.                         province: "",
    10.                         city: "",
    11.                         area: "",
    12.                         street: "",
    13.                         address: "",
    14.                     };
    15.                     // 获取经纬度（gcjo2）腾讯地图可直接使用
    16.                     uni.getLocation({
    17.                         type: "gcj02",
    18.                         success(res) {
    19.                             location.longitude = res.longitude;
    20.                             location.latitude = res.latitude;
    21.                             // 腾讯地图Api
    22.                             const qqmapsdk = new QQMapWX({
    23.                                 key: '' //这里填写自己申请的key
    24.                             });
    25.                             // 使用腾讯地图api
    26.                             qqmapsdk.reverseGeocoder({
    27.                                 location,
    28.                                 success(response) {
    29.                                     let info = response.result;
    30.                                     // 注意查看打印信息
    31.                                     console.log('获取位置信息',info);
    32.                                     location.province = info.address_component.province;
    33.                                     location.city = info.address_component.city;
    34.                                     location.area = info.address_component.district;
    35.                                     location.street = info.address_component.street;
    36.                                     location.address = info.address;
    37.                                     // 详细地址
    38.                                     location.recommend = info.formatted_addresses.recommend
    39.                                     location.rough = info.formatted_addresses.rough
    40.                                     // 我使用这里面地址
    41.                                     location.standard_address = info.formatted_addresses
    42.                                         .standard_address
    43.                                     resolve(location);
    44.                                 },
    45.                             });
    46.                         },
    47.                         fail(err) {
    48.                             console.log(err)
    49.                         },
    50.                     });
    51.                 });
    52.             },
    3.3使用该方法获取地址
    1. // 获取当前地址
    2. const location = await this.getLocationInfo();
    3. console.log('获取地址', location);
    4.测试效果

    • 使用微信开发者工具测试时会出现定位不准-正常，会弹起授权框询问用户是否愿意获取位置信息

    • 使用真机测试，或者体验版测试位置就准了，根据自己需求看打印获取信息，自己组装

    总结：

    经过这一趟流程下来相信你也对 uni-app 使用uni.getLocation获取经纬度配合腾讯地图api获取当前地址 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

    有什么不足的地方请大家指出谢谢 -- 風过无痕

  • 相关阅读:
    照片后期处理软件DxO FilmPack 6 mac中文说明
    HTML5期末大作业：游戏网站设计与实现——基于bootstrap响应式游戏资讯网站制作HTML+CSS+JavaScript...
    数据库并发问题及四种隔离级别
    虚拟内存分配
    Mysql DateTime 问题
    优化 cesium 界面广告牌（billboard）数据量大于 10w ＋时，地图加载缓慢、卡顿、加载完成后浏览器严重卡顿甚至崩溃问题
    前端开发学习之【Vue】-上
    c语言-数据结构-栈和队列的实现和解析
    期刊级别应该是怎样划分的呢？
    开发手机软件需要学什么内容才可以呢
  • 原文地址：https://blog.csdn.net/weixin_53579656/article/details/134563230