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

前言   

今天在做新需求的时候发现个很尬的问题：我们项目的小程序是直接输入账号密码进行登录的，不是平常的获得用户授权登录的模式，所以当我使用wx.getlocation一直拉不下来授权一直进fail不去success的时候我开始慌了   

我以为是由于这个登录模式不同导致，然后我就开始疯狂骚扰我的小伙伴，问是不是这种登录模式会拉不到用户授权（在这里感谢我的小伙伴们没打死我，反而认真给我解惑），后来我清了下开发者工具缓存就能拉下来了（在这里求求tx的大佬们再做做开发者工具的优化吧，写原生的真的要流泪了）     

如果觉得上面屁话太多可以不看哈，只要记住：    

 使用输入账号密码和用户授权的登录模式都是可以拉下来授权的（小声bb:其实我感觉平地都能拉授权）

使用

获得经纬度加逆解析得到详细地址

先要有个腾讯地图的key官网：

贴上百度经验申请腾讯地图key的链接（比我自己写的详细得多）：…

贴上官网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地址：…

<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 [e-mail]
 */
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;

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

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

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

总结

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