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

news2025/1/16 5:37:58

前言

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

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

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

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

报错情况-对应解决办法

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

或者直接源码视图-小程序直接配置如下代码
"permission" : {
            "scope.userLocation" : {
                "desc" : "真实用途"
            }
 }
报错三: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)代码如下
/**
 * 微信小程序JavaScriptSDK
 * 
 * @version 1.1
 * @date 2019-01-20
 */
​
var ERROR_CONF = {
    KEY_ERR: 311,
    KEY_ERR_MSG: 'key格式错误',
    PARAM_ERR: 310,
    PARAM_ERR_MSG: '请求参数信息有误',
    SYSTEM_ERR: 600,
    SYSTEM_ERR_MSG: '系统错误',
    WX_ERR_CODE: 1000,
    WX_OK_CODE: 200
};
var BASE_URL = 'https://apis.map.qq.com/ws/';
var URL_SEARCH = BASE_URL + 'place/v1/search';
var URL_SUGGESTION = BASE_URL + 'place/v1/suggestion';
var URL_GET_GEOCODER = BASE_URL + 'geocoder/v1/';
var URL_CITY_LIST = BASE_URL + 'district/v1/list';
var URL_AREA_LIST = BASE_URL + 'district/v1/getchildren';
var URL_DISTANCE = BASE_URL + 'distance/v1/';
var EARTH_RADIUS = 6378136.49;
var Utils = {
    /**
     * 得到终点query字符串
     * @param {Array|String} 检索数据
     */
    location2query(data) {
        if (typeof data == 'string') {
            return data;
        }
        var query = '';
        for (var i = 0; i < data.length; i++) {
            var d = data[i];
            if (!!query) {
                query += ';';
            }
            if (d.location) {
                query = query + d.location.lat + ',' + d.location.lng;
            }
            if (d.latitude && d.longitude) {
                query = query + d.latitude + ',' + d.longitude;
            }
        }
        return query;
    },
​
    /**
     * 计算角度
     */
    rad(d) {
      return d * Math.PI / 180.0;
    },  
    /**
     * 处理终点location数组
     * @return 返回终点数组
     */
    getEndLocation(location){
      var to = location.split(';');
      var endLocation = [];
      for (var i = 0; i < to.length; i++) {
        endLocation.push({
          lat: parseFloat(to[i].split(',')[0]),
          lng: parseFloat(to[i].split(',')[1])
        })
      }
      return endLocation;
    },
​
    /**
     * 计算两点间直线距离
     * @param a 表示纬度差
     * @param b 表示经度差
     * @return 返回的是距离,单位m
     */
    getDistance(latFrom, lngFrom, latTo, lngTo) {
      var radLatFrom = this.rad(latFrom);
      var radLatTo = this.rad(latTo);
      var a = radLatFrom - radLatTo;
      var b = this.rad(lngFrom) - this.rad(lngTo);
      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)));
      distance = distance * EARTH_RADIUS;
      distance = Math.round(distance * 10000) / 10000;
      return parseFloat(distance.toFixed(0));
    },
    /**
     * 使用微信接口进行定位
     */
    getWXLocation(success, fail, complete) {
        wx.getLocation({
            type: 'gcj02',
            success: success,
            fail: fail,
            complete: complete
        });
    },
​
    /**
     * 获取location参数
     */
    getLocationParam(location) {
        if (typeof location == 'string') {
            var locationArr = location.split(',');
            if (locationArr.length === 2) {
                location = {
                    latitude: location.split(',')[0],
                    longitude: location.split(',')[1]
                };
            } else {
                location = {};
            }
        }
        return location;
    },
​
    /**
     * 回调函数默认处理
     */
    polyfillParam(param) {
        param.success = param.success || function () { };
        param.fail = param.fail || function () { };
        param.complete = param.complete || function () { };
    },
​
    /**
     * 验证param对应的key值是否为空
     * 
     * @param {Object} param 接口参数
     * @param {String} key 对应参数的key
     */
    checkParamKeyEmpty(param, key) {
        if (!param[key]) {
            var errconf = this.buildErrorConfig(ERROR_CONF.PARAM_ERR, ERROR_CONF.PARAM_ERR_MSG + key +'参数格式有误');
            param.fail(errconf);
            param.complete(errconf);
            return true;
        }
        return false;
    },
​
    /**
     * 验证参数中是否存在检索词keyword
     * 
     * @param {Object} param 接口参数
     */
    checkKeyword(param){
        return !this.checkParamKeyEmpty(param, 'keyword');
    },
​
    /**
     * 验证location值
     * 
     * @param {Object} param 接口参数
     */
    checkLocation(param) {
        var location = this.getLocationParam(param.location);
        if (!location || !location.latitude || !location.longitude) {
            var errconf = this.buildErrorConfig(ERROR_CONF.PARAM_ERR, ERROR_CONF.PARAM_ERR_MSG + ' location参数格式有误');
            param.fail(errconf);
            param.complete(errconf);
            return false;
        }
        return true;
    },
​
    /**
     * 构造错误数据结构
     * @param {Number} errCode 错误码
     * @param {Number} errMsg 错误描述
     */
    buildErrorConfig(errCode, errMsg) {
        return {
            status: errCode,
            message: errMsg
        };
    },
​
    /**
     * 
     * 数据处理函数
     * 根据传入参数不同处理不同数据
     * @param {String} feature 功能名称
     * search 地点搜索
     * suggest关键词提示
     * reverseGeocoder逆地址解析
     * geocoder地址解析
     * getCityList获取城市列表:父集
     * getDistrictByCityId获取区县列表:子集
     * calculateDistance距离计算
     * @param {Object} param 接口参数
     * @param {Object} data 数据
     */
    handleData(param,data,feature){
      if (feature === 'search') {
        var searchResult = data.data;
        var searchSimplify = [];
        for (var i = 0; i < searchResult.length; i++) {
          searchSimplify.push({
            id: searchResult[i].id || null,
            title: searchResult[i].title || null,
            latitude: searchResult[i].location && searchResult[i].location.lat || null,
            longitude: searchResult[i].location && searchResult[i].location.lng || null,
            address: searchResult[i].address || null,
            category: searchResult[i].category || null,
            tel: searchResult[i].tel || null,
            adcode: searchResult[i].ad_info && searchResult[i].ad_info.adcode || null,
            city: searchResult[i].ad_info && searchResult[i].ad_info.city || null,
            district: searchResult[i].ad_info && searchResult[i].ad_info.district || null,
            province: searchResult[i].ad_info && searchResult[i].ad_info.province || null
          })
        }
        param.success(data, {
          searchResult: searchResult,
          searchSimplify: searchSimplify
        })
      } else if (feature === 'suggest') {
        var suggestResult = data.data;
        var suggestSimplify = [];
        for (var i = 0; i < suggestResult.length; i++) {
          suggestSimplify.push({
            adcode: suggestResult[i].adcode || null,
            address: suggestResult[i].address || null,
            category: suggestResult[i].category || null,
            city: suggestResult[i].city || null,
            district: suggestResult[i].district || null,
            id: suggestResult[i].id || null,
            latitude: suggestResult[i].location && suggestResult[i].location.lat || null,
            longitude: suggestResult[i].location && suggestResult[i].location.lng || null,
            province: suggestResult[i].province || null,
            title: suggestResult[i].title || null,
            type: suggestResult[i].type || null
          })
        }
        param.success(data, {
          suggestResult: suggestResult,
          suggestSimplify: suggestSimplify
          })
      } else if (feature === 'reverseGeocoder') {
        var reverseGeocoderResult = data.result;
        var reverseGeocoderSimplify = {
          address: reverseGeocoderResult.address || null,
          latitude: reverseGeocoderResult.location && reverseGeocoderResult.location.lat || null,
          longitude: reverseGeocoderResult.location && reverseGeocoderResult.location.lng || null,
          adcode: reverseGeocoderResult.ad_info && reverseGeocoderResult.ad_info.adcode || null,
          city: reverseGeocoderResult.address_component && reverseGeocoderResult.address_component.city || null,
          district: reverseGeocoderResult.address_component && reverseGeocoderResult.address_component.district || null,
          nation: reverseGeocoderResult.address_component && reverseGeocoderResult.address_component.nation || null,
          province: reverseGeocoderResult.address_component && reverseGeocoderResult.address_component.province || null,
          street: reverseGeocoderResult.address_component && reverseGeocoderResult.address_component.street || null,
          street_number: reverseGeocoderResult.address_component && reverseGeocoderResult.address_component.street_number || null,
          recommend: reverseGeocoderResult.formatted_addresses && reverseGeocoderResult.formatted_addresses.recommend || null,
          rough: reverseGeocoderResult.formatted_addresses && reverseGeocoderResult.formatted_addresses.rough || null
        };
        if (reverseGeocoderResult.pois) {//判断是否返回周边poi
          var pois = reverseGeocoderResult.pois;
          var poisSimplify = [];
          for (var i = 0;i < pois.length;i++) {
            poisSimplify.push({
              id: pois[i].id || null,
              title: pois[i].title || null,
              latitude: pois[i].location && pois[i].location.lat || null,
              longitude: pois[i].location && pois[i].location.lng || null,
              address: pois[i].address || null,
              category: pois[i].category || null,
              adcode: pois[i].ad_info && pois[i].ad_info.adcode || null,
              city: pois[i].ad_info && pois[i].ad_info.city || null,
              district: pois[i].ad_info && pois[i].ad_info.district || null,
              province: pois[i].ad_info && pois[i].ad_info.province || null
            })
          }
          param.success(data,{
            reverseGeocoderResult: reverseGeocoderResult,
            reverseGeocoderSimplify: reverseGeocoderSimplify,
            pois: pois,
            poisSimplify: poisSimplify
          })
        } else {
          param.success(data, {
            reverseGeocoderResult: reverseGeocoderResult,
            reverseGeocoderSimplify: reverseGeocoderSimplify
          })
        }
      } else if (feature === 'geocoder') {
        var geocoderResult = data.result;
        var geocoderSimplify = {
          title: geocoderResult.title || null,
          latitude: geocoderResult.location && geocoderResult.location.lat || null,
          longitude: geocoderResult.location && geocoderResult.location.lng || null,
          adcode: geocoderResult.ad_info && geocoderResult.ad_info.adcode || null,
          province: geocoderResult.address_components && geocoderResult.address_components.province || null,
          city: geocoderResult.address_components && geocoderResult.address_components.city || null,
          district: geocoderResult.address_components && geocoderResult.address_components.district || null,
          street: geocoderResult.address_components && geocoderResult.address_components.street || null,
          street_number: geocoderResult.address_components && geocoderResult.address_components.street_number || null,
          level: geocoderResult.level || null
        };
        param.success(data,{
          geocoderResult: geocoderResult,
          geocoderSimplify: geocoderSimplify
        });
      } else if (feature === 'getCityList') {
        var provinceResult = data.result[0];
        var cityResult = data.result[1];
        var districtResult = data.result[2];
        param.success(data,{
          provinceResult: provinceResult,
          cityResult: cityResult,
          districtResult: districtResult
        });
      } else if (feature === 'getDistrictByCityId') {
        var districtByCity = data.result[0];
        param.success(data, districtByCity);
      } else if (feature === 'calculateDistance') {
        var calculateDistanceResult = data.result.elements;  
        var distance = [];
        for (var i = 0; i < calculateDistanceResult.length; i++){
          distance.push(calculateDistanceResult[i].distance);
        }   
        param.success(data, {
          calculateDistanceResult: calculateDistanceResult,
          distance: distance
          });
      } else {
        param.success(data);
      }
    },
​
    /**
     * 构造微信请求参数,公共属性处理
     * 
     * @param {Object} param 接口参数
     * @param {Object} param 配置项
     * @param {String} feature 方法名
     */
    buildWxRequestConfig(param, options, feature) {
        var that = this;
        options.header = { "content-type": "application/json" };
        options.method = 'GET';
        options.success = function (res) {
            var data = res.data;
            if (data.status === 0) {
              that.handleData(param, data, feature);
            } else {
                param.fail(data);
            }
        };
        options.fail = function (res) {
            res.statusCode = ERROR_CONF.WX_ERR_CODE;
            param.fail(that.buildErrorConfig(ERROR_CONF.WX_ERR_CODE, res.errMsg));
        };
        options.complete = function (res) {
            var statusCode = +res.statusCode;
            switch(statusCode) {
                case ERROR_CONF.WX_ERR_CODE: {
                    param.complete(that.buildErrorConfig(ERROR_CONF.WX_ERR_CODE, res.errMsg));
                    break;
                }
                case ERROR_CONF.WX_OK_CODE: {
                    var data = res.data;
                    if (data.status === 0) {
                        param.complete(data);
                    } else {
                        param.complete(that.buildErrorConfig(data.status, data.message));
                    }
                    break;
                }
                default:{
                    param.complete(that.buildErrorConfig(ERROR_CONF.SYSTEM_ERR, ERROR_CONF.SYSTEM_ERR_MSG));
                }
​
            }
        };
        return options;
    },
​
    /**
     * 处理用户参数是否传入坐标进行不同的处理
     */
    locationProcess(param, locationsuccess, locationfail, locationcomplete) {
        var that = this;
        locationfail = locationfail || function (res) {
            res.statusCode = ERROR_CONF.WX_ERR_CODE;
            param.fail(that.buildErrorConfig(ERROR_CONF.WX_ERR_CODE, res.errMsg));
        };
        locationcomplete = locationcomplete || function (res) {
            if (res.statusCode == ERROR_CONF.WX_ERR_CODE) {
                param.complete(that.buildErrorConfig(ERROR_CONF.WX_ERR_CODE, res.errMsg));
            }
        };
        if (!param.location) {
            that.getWXLocation(locationsuccess, locationfail, locationcomplete);
        } else if (that.checkLocation(param)) {
            var location = Utils.getLocationParam(param.location);
            locationsuccess(location);
        }
    }
};
​
​
class QQMapWX {
​
    /**
     * 构造函数
     * 
     * @param {Object} options 接口参数,key 为必选参数
     */
    constructor(options) {
        if (!options.key) {
            throw Error('key值不能为空');
        }
        this.key = options.key;
    };
​
    /**
     * POI周边检索
     *
     * @param {Object} options 接口参数对象
     * 
     * 参数对象结构可以参考
     * @see http://lbs.qq.com/webservice_v1/guide-search.html
     */
    search(options) {
        var that = this;
        options = options || {};
​
        Utils.polyfillParam(options);
​
        if (!Utils.checkKeyword(options)) {
            return;
        }
​
        var requestParam = {
            keyword: options.keyword,
            orderby: options.orderby || '_distance',
            page_size: options.page_size || 10,
            page_index: options.page_index || 1,
            output: 'json',
            key: that.key
        };
​
        if (options.address_format) {
            requestParam.address_format = options.address_format;
        }
​
        if (options.filter) {
            requestParam.filter = options.filter;
        }
​
        var distance = options.distance || "1000";
        var auto_extend = options.auto_extend || 1;
        var region = null;
        var rectangle = null;
​
        //判断城市限定参数
        if (options.region) {
          region = options.region;
        }
​
        //矩形限定坐标(暂时只支持字符串格式)
        if (options.rectangle) {
          rectangle = options.rectangle;
        }
​
        var locationsuccess = function (result) {        
          if (region && !rectangle) {
            //城市限定参数拼接
            requestParam.boundary = "region(" + region + "," + auto_extend + "," + result.latitude + "," + result.longitude + ")";
          } else if (rectangle && !region) {
            //矩形搜索
            requestParam.boundary = "rectangle(" + rectangle + ")";
            } else {
              requestParam.boundary = "nearby(" + result.latitude + "," + result.longitude + "," + distance + "," + auto_extend + ")";
            }            
            wx.request(Utils.buildWxRequestConfig(options, {
                url: URL_SEARCH,
                data: requestParam
            }, 'search'));
        };
        Utils.locationProcess(options, locationsuccess);
    };
​
    /**
     * sug模糊检索
     *
     * @param {Object} options 接口参数对象
     * 
     * 参数对象结构可以参考
     * http://lbs.qq.com/webservice_v1/guide-suggestion.html
     */
    getSuggestion(options) {
        var that = this;
        options = options || {};
        Utils.polyfillParam(options);
​
        if (!Utils.checkKeyword(options)) {
            return;
        }
​
        var requestParam = {
            keyword: options.keyword,
            region: options.region || '全国',
            region_fix: options.region_fix || 0,
            policy: options.policy || 0,
            page_size: options.page_size || 10,//控制显示条数
            page_index: options.page_index || 1,//控制页数
            get_subpois : options.get_subpois || 0,//返回子地点
            output: 'json',
            key: that.key
        };
        //长地址
        if (options.address_format) {
          requestParam.address_format = options.address_format;
        }
        //过滤
        if (options.filter) {
          requestParam.filter = options.filter;
        }
        //排序
        if (options.location) {
          var locationsuccess = function (result) {
            requestParam.location = result.latitude + ',' + result.longitude;
            wx.request(Utils.buildWxRequestConfig(options, {
              url: URL_SUGGESTION,
              data: requestParam
            }, "suggest"));      
          };
          Utils.locationProcess(options, locationsuccess);
        } else {
          wx.request(Utils.buildWxRequestConfig(options, {
            url: URL_SUGGESTION,
            data: requestParam
          }, "suggest"));      
        } 
    };
​
    /**
     * 逆地址解析
     *
     * @param {Object} options 接口参数对象
     * 
     * 请求参数结构可以参考
     * http://lbs.qq.com/webservice_v1/guide-gcoder.html
     */
    reverseGeocoder(options) {
        var that = this;
        options = options || {};
        Utils.polyfillParam(options);
        var requestParam = {
            coord_type: options.coord_type || 5,
            get_poi: options.get_poi || 0,
            output: 'json',
            key: that.key
        };
        if (options.poi_options) {
            requestParam.poi_options = options.poi_options
        }
​
        var locationsuccess = function (result) {
            requestParam.location = result.latitude + ',' + result.longitude;
            wx.request(Utils.buildWxRequestConfig(options, {
                url: URL_GET_GEOCODER,
                data: requestParam
            }, 'reverseGeocoder'));
        };
        Utils.locationProcess(options, locationsuccess);
    };
​
    /**
     * 地址解析
     *
     * @param {Object} options 接口参数对象
     * 
     * 请求参数结构可以参考
     * http://lbs.qq.com/webservice_v1/guide-geocoder.html
     */
    geocoder(options) {
        var that = this;
        options = options || {};
        Utils.polyfillParam(options);
​
        if (Utils.checkParamKeyEmpty(options, 'address')) {
            return;
        }
​
        var requestParam = {
            address: options.address,
            output: 'json',
            key: that.key
        };
​
        //城市限定
        if (options.region) {
          requestParam.region = options.region;
        }
​
        wx.request(Utils.buildWxRequestConfig(options, {
            url: URL_GET_GEOCODER,
            data: requestParam
        },'geocoder'));
    };
​
​
    /**
     * 获取城市列表
     *
     * @param {Object} options 接口参数对象
     * 
     * 请求参数结构可以参考
     * http://lbs.qq.com/webservice_v1/guide-region.html
     */
    getCityList(options) {
        var that = this;
        options = options || {};
        Utils.polyfillParam(options);
        var requestParam = {
            output: 'json',
            key: that.key
        };
​
        wx.request(Utils.buildWxRequestConfig(options, {
            url: URL_CITY_LIST,
            data: requestParam
        },'getCityList'));
    };
​
    /**
     * 获取对应城市ID的区县列表
     *
     * @param {Object} options 接口参数对象
     * 
     * 请求参数结构可以参考
     * http://lbs.qq.com/webservice_v1/guide-region.html
     */
    getDistrictByCityId(options) {
        var that = this;
        options = options || {};
        Utils.polyfillParam(options);
​
        if (Utils.checkParamKeyEmpty(options, 'id')) {
            return;
        }
​
        var requestParam = {
            id: options.id || '',
            output: 'json',
            key: that.key
        };
​
        wx.request(Utils.buildWxRequestConfig(options, {
            url: URL_AREA_LIST,
            data: requestParam
        },'getDistrictByCityId'));
    };
​
    /**
     * 用于单起点到多终点的路线距离(非直线距离)计算:
     * 支持两种距离计算方式:步行和驾车。
     * 起点到终点最大限制直线距离10公里。
     *
     * 新增直线距离计算。
     * 
     * @param {Object} options 接口参数对象
     * 
     * 请求参数结构可以参考
     * http://lbs.qq.com/webservice_v1/guide-distance.html
     */
    calculateDistance(options) {
        var that = this;
        options = options || {};
        Utils.polyfillParam(options);
​
        if (Utils.checkParamKeyEmpty(options, 'to')) {
            return;
        }
​
        var requestParam = {
            mode: options.mode || 'walking',
            to: Utils.location2query(options.to),
            output: 'json',
            key: that.key
        };
​
        if (options.from) {
          options.location = options.from;
        }
​
        //计算直线距离
        if(requestParam.mode == 'straight'){        
          var locationsuccess = function (result) {
            var locationTo = Utils.getEndLocation(requestParam.to);//处理终点坐标
            var data = {
              message:"query ok",
              result:{
                elements:[]
              },
              status:0
            };
            for (var i = 0; i < locationTo.length; i++) {
              data.result.elements.push({//将坐标存入
                distance: Utils.getDistance(result.latitude, result.longitude, locationTo[i].lat, locationTo[i].lng),
                duration:0,
                from:{
                  lat: result.latitude,
                  lng:result.longitude
                },
                to:{
                  lat: locationTo[i].lat,
                  lng: locationTo[i].lng
                }
              });            
            }
            var calculateResult = data.result.elements;
            var distanceResult = [];
            for (var i = 0; i < calculateResult.length; i++) {
              distanceResult.push(calculateResult[i].distance);
            }  
            return options.success(data,{
              calculateResult: calculateResult,
              distanceResult: distanceResult
            });
          };
          
          Utils.locationProcess(options, locationsuccess);
        } else {
          var locationsuccess = function (result) {
            requestParam.from = result.latitude + ',' + result.longitude;
            wx.request(Utils.buildWxRequestConfig(options, {
              url: URL_DISTANCE,
              data: requestParam
            },'calculateDistance'));
          };
​
          Utils.locationProcess(options, locationsuccess);
        }      
    }
};
​
module.exports = QQMapWX;
3.在需要获取位置信息页面引入使用
3.1引入文件sdk
import QQMapWX from "@/utils/tenxun/qqmap-wx-jssdk.js"
3.2 获取位置信息方法-复制要填写key,里面有各种信息,根据需求看打印信息
// 获取位置信息
            async getLocationInfo() {
                //获取位置信息
                return new Promise((resolve) => {
                    //位置信息默认数据
                    let location = {
                        longitude: 0,
                        latitude: 0,
                        province: "",
                        city: "",
                        area: "",
                        street: "",
                        address: "",
                    };
                    // 获取经纬度(gcjo2)腾讯地图可直接使用
                    uni.getLocation({
                        type: "gcj02",
                        success(res) {
                            location.longitude = res.longitude;
                            location.latitude = res.latitude;
                            // 腾讯地图Api
                            const qqmapsdk = new QQMapWX({
                                key: '' //这里填写自己申请的key
                            });
                            // 使用腾讯地图api
                            qqmapsdk.reverseGeocoder({
                                location,
                                success(response) {
                                    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.recommend = info.formatted_addresses.recommend
                                    location.rough = info.formatted_addresses.rough
                                    // 我使用这里面地址
                                    location.standard_address = info.formatted_addresses
                                        .standard_address
                                    resolve(location);
                                },
                            });
                        },
                        fail(err) {
                            console.log(err)
                        },
                    });
                });
            },
3.3使用该方法获取地址
// 获取当前地址
const location = await this.getLocationInfo();
console.log('获取地址', location);
4.测试效果
  • 使用微信开发者工具测试时会出现定位不准-正常,会弹起授权框询问用户是否愿意获取位置信息

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


总结:

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1239837.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

d3dx9_43.dll缺失怎么办?教你一分钟修复d3dx9_43.dll丢失问题

今天&#xff0c;与大家分享关于“d3dx9_43.dll丢失的5个解决方法”的主题。在我们的日常生活和工作中&#xff0c;我们可能会遇到各种各样的问题&#xff0c;而d3dx9_43.dll丢失就是其中之一。那么&#xff0c;什么是d3dx9_43.dll呢&#xff1f;它为什么会丢失&#xff1f;又该…

pikachu靶场PHP反序列化漏洞

pikachu靶场PHP反序列化漏洞 源码分析 查看源代码 class S{var $test "pikachu";function __construct(){echo $this->test;} }// O:1:"S":1:{s:4:"test";s:29:"<script>alert(xss)</script>";} $html; if(isset($_PO…

深度学习之基于YoloV5车辆和行人目标检测系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介YOLOv5 简介YOLOv5 特点 车辆和行人目标检测系统 二、功能三、系统四. 总结 一项目简介 # 深度学习之基于 YOLOv5 车辆和行人目标检测系统介绍 深度学习在…

帝国cms开发一个泛知识类的小程序的历程记录

#帝国cms小程序# 要开发一个泛知识类的小程序&#xff0c;要解决以下几个问题。 1。知识内容的分类。 2。知识内容的内容展示。 3。知识内容的价格设置。 4。用户体系&#xff0c;为简化用户的操作&#xff0c;在用户进行下载的时候&#xff0c;请用户输入手机号&#xff…

二、类与对象(二)

8 this指针 8.1 this指针的引入 我们先来定义一个日期的类Date&#xff1a; #include <iostream> using namespace std; class Date { public:void Init(int year, int month, int day){_year year;_month month;_day day;}void Print(){cout << _year <&l…

【Java 进阶篇】Redis:打开缓存之门

介绍 Redis&#xff08;Remote Dictionary Server&#xff09;是一个高性能的键值对存储系统&#xff0c;被广泛用作缓存、消息中间件和数据库。它以其快速的读写能力、支持多种数据结构和丰富的功能而闻名。在这篇博客中&#xff0c;我们将深入了解Redis的概念、安装以及基本…

【LeetCode刷题】--43.字符串相乘

43.字符串相乘 方法一&#xff1a;做加法&#xff0c;模拟竖式乘法的方法计算乘积 class Solution {public String multiply(String num1, String num2) {if(num1.equals("0") || num2.equals("0")){return "0";}String res "0";//nu…

什么是开关电源测试系统?如何用它进行测试?

开关电源测试系统是针对开关电源测试而开发的一种智能自动化测试系统&#xff0c;打破传统测试程序与缺陷&#xff0c;满足客户新的测试需求&#xff0c;助力客户解决测试难点&#xff0c;顺利完成开关电源测试&#xff0c;提高测试效能。那么开关电源自动化测试方案的流程是什…

设备状态监测与故障诊断系统的作用

随着工业生产的发展和技术的进步&#xff0c;设备状态监测与故障诊断系统在工业领域中扮演着越来越重要的角色。这一系统通过实时监测设备的状态和参数&#xff0c;及时发现潜在的故障&#xff0c;并提供预警信号&#xff0c;以降低生产中断、提高安全性和维护效率。以下将详细…

【Java 进阶篇】从Java对象到JSON:Jackson的魔法之旅

在现代的软件开发中&#xff0c;处理数据的能力是至关重要的。而当我们谈及数据格式时&#xff0c;JSON&#xff08;JavaScript Object Notation&#xff09;通常是首选。为了在Java中轻松地将对象转换为JSON&#xff0c;我们需要一种强大而灵活的工具。这时&#xff0c;Jackso…

HTML玩转超链接a标签

大家应该都知道&#xff0c;a标签主要是转跳链接&#xff0c;接下来&#xff0c;让我为大家介绍一下a标签的使用&#xff01; 主要的作用&#xff1a;从当前页面进行跳转 标签名标签语义常用属性单/双标签a超链接href&#xff1a;要跳转的具体位置 target&#xff1a;跳转时如…

2023年【安全生产监管人员】考试题及安全生产监管人员找解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 安全生产监管人员考试题参考答案及安全生产监管人员考试试题解析是安全生产模拟考试一点通题库老师及安全生产监管人员操作证已考过的学员汇总&#xff0c;相对有效帮助安全生产监管人员找解析学员顺利通过考试。 1、…

HTTPS协议的加密流程

目录 一&#xff0c;HTTPS是什么 二&#xff0c;两种加密方式 三&#xff0c;HTTPS的加密过程 3.1 引入对称加密 3.2 引入非对称加密 3.3 引入证书 一&#xff0c;HTTPS是什么 HTTPS也是一个应用层协议&#xff0c;它是在HTTP协议的基础上引入了一个加密层。因为HTTP协议…

phpinfo中的重要信息

phpinfo中的重要信息 1.PHP/操作系统版本信息2.Configuration File(ini配置文件位置)3.Registered PHP Streams(支持的流)4.Registered Stream Filters(支持的流过滤器)5.allow_url_fopen&allow_url_include6.disable_functions7.display_errors8.include_path9.open_based…

[Docker]九.Docker compose讲解

docker-compose 是 docker 官方的一个开源项目&#xff0c;可以实现对 docker 容器集群的快速编排, docker-compose 通过一个 配置文件 来管理多个 Docker 容器,在配置文件中&#xff0c;所有的容器通过 services 来定义&#xff0c;然后使用 docker-compose脚本 来 启动&am…

redis的高可用(主从复制和哨兵模式)

redis的高可用&#xff08;主从复制和哨兵模式&#xff09; redis的性能管理&#xff1a;redis的数据缓存在内存当中 INFO memory&#xff1a;查看redis内存使用情况 used_memory:1800800&#xff1a;redis中数据占用的内存 used_memory_rss:5783552&#xff1a;redis向操作…

CCFCSP试题编号:201912-2试题名称:回收站选址

这题只要比较坐标的四周&#xff0c;然后计数就可以了。 #include <iostream> using namespace std;int main() {int n;cin >> n;int arr[1005][2] { 0 };int res[5] { 0 };int up 0;int down 0;int left 0;int right 0;int score 0;for (int i 0; i <…

C运算符与表达式

跟着肯哥&#xff08;不是我&#xff09;学运算符与表达式 运算符 在C语言中&#xff0c;运算符是一种用来执行特定操作的符号或关键字。它们用于对变量、常量和表达进行计算、逻辑判断和位操作等。 定义一般都当耳旁风了 运算符分类 算术运算符 -*/%加减乘除取模&#xff0c;…

微软Copilot即将对大陆开放,一起来看看都有什么好用的功能

微软发布了Copilot&#xff0c;12月1日起对大陆用户开放&#xff0c;以下是Copilot的11个新功能&#xff0c;你一定不想错过&#xff1a;1. PowerPoint&#xff1a; 将Word文档转换为演示文稿。从文件中快速创建演示文稿。通过关键幻灯片总结冗长的演示文稿。使用提示添加新的…

二分查找——经典题目合集

文章目录 &#x1f99c;69. x 的平方根&#x1f33c;题目&#x1f33b;算法原理&#x1f337;代码实现 &#x1f433;35. 搜索插入位置&#x1f33c;题目&#x1f33b;算法原理&#x1f337;代码实现 &#x1f9ad;852. 山脉数组的峰顶索引&#x1f33c;题目&#x1f33b;算法原…