一次微信小程序内地图的使用实战记录


Posted in Javascript onSeptember 09, 2019

前言   

今天在做新需求的时候发现个很尬的问题:我们项目的小程序是直接输入账号密码进行登录的,不是平常的获得用户授权登录的模式,所以当我使用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;

总感觉还有啥没写,但又想不起来了,回头记起来补吧

实话感觉自己写的这个没什么技术含量,就当给自己的一个总结,所以求各位轻喷

使用如果有问题的话就在评论区滴滴,我会的都跟你说啾咪,就这样啦~

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript css styleFloat和cssFloat
Mar 15 Javascript
js动态添加事件并可传参数示例代码
Oct 21 Javascript
javasript实现密码的隐藏与显示
May 08 Javascript
require.js的用法详解
Oct 20 Javascript
javascript实现状态栏中文字动态显示的方法
Oct 20 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
Jul 14 Javascript
bootstrap table表格使用方法详解
Apr 26 Javascript
微信小程序 侧滑删除(左滑删除)
May 23 Javascript
基于zepto.js实现登录界面
Oct 09 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
Oct 23 Javascript
小程序实现左右来回滚动字幕效果
Dec 28 Javascript
layui表格 列自动适应大小失效的解决方法
Sep 06 Javascript
微信小程序HTTP请求从0到1封装
Sep 09 #Javascript
JS回调函数 callback的理解与使用案例分析
Sep 09 #Javascript
世界上最短的数字判断js代码
Sep 09 #Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 #Javascript
javascript删除数组元素的七个方法示例
Sep 09 #Javascript
微信小程序 select 下拉框组件功能
Sep 09 #Javascript
移动端手指操控左右滑动的菜单
Sep 08 #Javascript
You might like
smarty section简介与用法分析
2008/10/03 PHP
php设计模式 Interpreter(解释器模式)
2011/06/26 PHP
ThinkPHP中的create方法与自动令牌验证实例教程
2014/08/22 PHP
php版微信发红包接口用法示例
2016/09/23 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
jQuery Ajax使用 全解析
2010/12/15 Javascript
Highcharts 非常实用的Javascript统计图demo示例
2013/07/03 Javascript
jquery及原生js获取select下拉框选中的值示例
2013/10/25 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
2013/12/18 Javascript
Document.location.href和.replace的区别示例介绍
2014/03/04 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
2016/05/20 Javascript
jQuery中使用animate自定义动画的方法
2016/05/29 Javascript
JS获取一个未知DIV高度的方法
2016/08/09 Javascript
js实现获取鼠标当前的位置
2016/12/14 Javascript
ES6 Symbol数据类型的应用实例分析
2019/06/26 Javascript
JavaScript碰撞检测原理及其实现代码
2020/03/12 Javascript
Python的Django框架中TEMPLATES项的设置教程
2015/05/29 Python
python中数据爬虫requests库使用方法详解
2018/02/11 Python
python实现网页自动签到功能
2019/01/21 Python
对python实现模板生成脚本的方法详解
2019/01/30 Python
python+OpenCV实现车牌号码识别
2019/11/08 Python
python读取tif图片时保留其16bit的编码格式实例
2020/01/13 Python
python使用Word2Vec进行情感分析解析
2020/07/31 Python
pycharm专业版远程登录服务器的详细教程
2020/09/15 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
Python常用扩展插件使用教程解析
2020/11/02 Python
python 视频下载神器(you-get)的具体使用
2021/01/06 Python
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
美国领先的礼品卡网站:GiftCards.com
2016/11/02 全球购物
HttpServlet类中的主要方法都有哪些?各自的作用是什么?
2014/03/16 面试题
依法行政工作汇报材料
2014/10/28 职场文书
2015年数学教师工作总结
2015/05/20 职场文书
2016年乡镇七一建党节活动总结
2016/04/05 职场文书
JS如何实现基于websocket的多端桥接平台
2021/05/14 Javascript
python字符串拼接.join()和拆分.split()详解
2021/11/23 Python