国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

一次微信小程序內地圖的使用實戰記錄

2019-11-19 10:51:09
字體:
來源:轉載
供稿:網友

前言   

今天在做新需求的時候發現個很尬的問題:我們項目的小程序是直接輸入賬號密碼進行登錄的,不是平常的獲得用戶授權登錄的模式,所以當我使用wx.getLocation一直拉不下來授權一直進fail不去success的時候我開始慌了   

我以為是由于這個登錄模式不同導致,然后我就開始瘋狂騷擾我的小伙伴,問是不是這種登錄模式會拉不到用戶授權(在這里感謝我的小伙伴們沒打死我,反而認真給我解惑),后來我清了下開發者工具緩存就能拉下來了(在這里求求TX的大佬們再做做開發者工具的優化吧,寫原生的真的要流淚了)     

如果覺得上面屁話太多可以不看哈,只要記住:    

 使用輸入賬號密碼和用戶授權的登錄模式都是可以拉下來授權的(小聲bb:其實我感覺平地都能拉授權)

使用

獲得經緯度加逆解析得到詳細地址

先要有個騰訊地圖的key官網:https://lbs.qq.com/

貼上百度經驗申請騰訊地圖key的鏈接(比我自己寫的詳細得多):jingyan.baidu.com/article/656

貼上官網API地址:developers.weixin.qq.com/miniprogram

記得在app.json里面配置: 

 "permission": { "scope.userLocation": { "desc": "我們將根據您的定位進行服務分類" } },

參數什么的以官方的為準,以下為具體代碼:

var QQMapWX = require('../../../utils/qqmap-wx-jssdk.js');const { request } = require("../../../utils/util");var qqmapsdk//onload里面寫的: // 實例化騰訊地圖API核心類 qqmapsdk = new QQMapWX({ key: '###MiaoWu~###'//這個去騰訊地圖申請 });
 // 獲取用戶的實時位置 getAddress() { var that = this; //1、獲取當前位置坐標 wx.getLocation({  type: 'wgs84',  success: function (res) {  //2、根據坐標獲取當前位置名稱,顯示在頂部:騰訊地圖逆地址解析  qqmapsdk.reverseGeocoder({   location: {   latitude: res.latitude,   longitude: res.longitude   },   success: function (addressRes) {   // 顯示位置   var address = addressRes.result.formatted_addresses.recommend;   console.log(address);   that.setData({     latitude: res.latitude,     longitude: res.longitude,    addressNow: address   })   }  })  },  fail: function () {  console.log("調取失敗")  } }) },

畫地圖并獲得經緯度以及詳細地址

方法和上面寫的相差無幾,就是多了點wxml的東西

官方map地址:developers.weixin.qq.com/miniprogram

<map id="map" longitude="{{longitude}}" latitude="{{latitude}}"  scale="14" show-scale show-location style="width: 100%; height: 100vh;">  <cover-view class="dosomething fr">  <cover-image class="img" src="/assets/icon/refresh.png" bindtap="toRefresh"></cover-image>  <cover-image class="img" src="/assets/icon/goSelf.png" bindtap="toRefresh"></cover-image> </cover-view> <cover-view class="sureLocation" bindtap="sureLocation">確定</cover-view></map>

業務需求不能讓用戶搜索以及選點,只能看自己所在位置,再加上開發者工具上暫不支持比例尺,所以這個圖就當看著意思意思(還有開發者工具上定位賊不準,都給我整到區政府去了,各位在用的時候還是看自己手機調吧)

最后貼上逆解析文件qqmap-wx-jssdk.js的代碼:

(不是我寫的哈,我只是大佬的搬運工QAQ)

/** * 微信小程序JavaScriptSDK * * @version 1.0 * @date 2017-01-10 * @author jaysonzhou@tencent.com */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 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; }, /**  * 使用微信接口進行定位  */  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 {Object} param 接口參數  * @param {Object} param 配置項  */ buildWxRequestConfig(param, options) {  var that = this;  options.header = { "content-type": "application/json" };  options.method = 'GET';  options.success = function (res) {   var data = res.data;   if (data.status === 0) {    param.success(data);   } else {    param.fail(data);   }  };  options.fail = function (res) {   res.statusCode = ERROR_CONF.WX_ERR_CODE;   param.fail(that.buildErrorConfig(ERROR_CONF.WX_ERR_CODE, result.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 locationsuccess = function (result) {   requestParam.boundary = "nearby(" + result.latitude + "," + result.longitude + "," + distance + "," + auto_extend +")";   wx.request(Utils.buildWxRequestConfig(options, {    url: URL_SEARCH,    data: requestParam   }));  }  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,    output: 'json',   key: that.key   };  wx.request(Utils.buildWxRequestConfig(options, {    url: URL_SUGGESTION,    data: requestParam   })); } /**  * 逆地址解析  *  * @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   }));  };  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  };  wx.request(Utils.buildWxRequestConfig(options, {   url: URL_GET_GEOCODER,    data: requestParam  })); } /**  * 獲取城市列表  *  * @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  })); } /**  * 獲取對應城市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  })); } /**  * 用于單起點到多終點的路線距離(非直線距離)計算:  * 支持兩種距離計算方式:步行和駕車。  * 起點到終點最大限制直線距離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  };   var locationsuccess = function (result) {   requestParam.from = result.latitude + ',' + result.longitude;   wx.request(Utils.buildWxRequestConfig(options, {    url: URL_DISTANCE,    data: requestParam    }));  }  if (options.from) {   options.location = options.from;  }    Utils.locationProcess(options, locationsuccess); }}module.exports = QQMapWX;

總感覺還有啥沒寫,但又想不起來了,回頭記起來補吧

實話感覺自己寫的這個沒什么技術含量,就當給自己的一個總結,所以求各位輕噴

使用如果有問題的話就在評論區滴滴,我會的都跟你說啾咪,就這樣啦~

總結

以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,謝謝大家對武林網的支持。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 五大连池市| 松桃| 井冈山市| 舟山市| 农安县| 富裕县| 鄂托克前旗| 安远县| 色达县| 彩票| 芦溪县| 高唐县| 泌阳县| 安国市| 高陵县| 漳平市| 故城县| 樟树市| 丁青县| 阜新| 金门县| 商洛市| 边坝县| 峨眉山市| 马公市| 临漳县| 泸西县| 天津市| 稻城县| 宣城市| 嘉禾县| 温州市| 太仆寺旗| 阳江市| 平潭县| 长沙市| 柳州市| 安陆市| 桃源县| 电白县| 宁波市|