前言

• 最近在開發中需要根據經緯度獲取當前位置信息，傳遞給后端，用來回顯顯示當前位置

• 查閱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) {//判斷是否返回周邊poivar 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;// 騰訊地圖Apiconst qqmapsdk = new QQMapWX({key: '' //這里填寫自己申請的key});// 使用騰訊地圖apiqqmapsdk.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.recommendlocation.rough = info.formatted_addresses.rough// 我使用這里面地址location.standard_address = info.formatted_addresses.standard_addressresolve(location);},});},fail(err) {console.log(err)},});});},

3.3使用該方法獲取地址

// 獲取當前地址
const location = await this.getLocationInfo();
console.log('獲取地址', location);

4.測試效果

• 使用微信開發者工具測試時會出現定位不準-正常，會彈起授權框詢問用戶是否愿意獲取位置信息

• 使用真機測試，或者體驗版測試位置就準了，根據自己需求看打印獲取信息，自己組裝

---

總結：

經過這一趟流程下來相信你也對 uni-app 使用uni.getLocation獲取經緯度配合騰訊地圖api獲取當前地址 有了初步的深刻印象，但在實際開發中我 們遇到的情況肯定是不一樣的，所以我們要理解它的原理，萬變不離其宗。加油，打工人！

有什么不足的地方請大家指出謝謝 -- 風過無痕