微信小程序內(nèi)地圖怎么用

這篇文章將為大家詳細(xì)講解有關(guān)微信小程序內(nèi)地圖怎么用，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

前言   

在做新需求的時(shí)候發(fā)現(xiàn)個(gè)很尬的問題：我們項(xiàng)目的小程序是直接輸入賬號(hào)密碼進(jìn)行登錄的，不是平常的獲得用戶授權(quán)登錄的模式，所以當(dāng)我使用wx.getLocation一直拉不下來授權(quán)一直進(jìn)fail不去success的時(shí)候我開始慌了   

我以為是由于這個(gè)登錄模式不同導(dǎo)致，然后我就開始瘋狂騷擾我的小伙伴，問是不是這種登錄模式會(huì)拉不到用戶授權(quán)（在這里感謝我的小伙伴們沒打死我，反而認(rèn)真給我解惑），后來我清了下開發(fā)者工具緩存就能拉下來了（在這里求求TX的大佬們?cè)僮鲎鲩_發(fā)者工具的優(yōu)化吧，寫原生的真的要流淚了）     

如果覺得上面屁話太多可以不看哈，只要記?。?nbsp;   

 使用輸入賬號(hào)密碼和用戶授權(quán)的登錄模式都是可以拉下來授權(quán)的（小聲bb:其實(shí)我感覺平地都能拉授權(quán)）

使用

獲得經(jīng)緯度加逆解析得到詳細(xì)地址

先要有個(gè)騰訊地圖的key官網(wǎng)：https://lbs.qq.com/

記得在app.json里面配置： 

 "permission": {
 "scope.userLocation": { "desc": "我們將根據(jù)您的定位進(jìn)行服務(wù)分類" } },

參數(shù)什么的以官方的為準(zhǔn)，以下為具體代碼：

var QQMapWX = require('../../../utils/qqmap-wx-jssdk.js');
const { request } = require("../../../utils/util");
var qqmapsdk
//onload里面寫的：
 // 實(shí)例化騰訊地圖API核心類
 qqmapsdk = new QQMapWX({
 key: '###MiaoWu~###'//這個(gè)去騰訊地圖申請(qǐng)
 });

 // 獲取用戶的實(shí)時(shí)位置 getAddress() {
 var that = this;
 //1、獲取當(dāng)前位置坐標(biāo)
 wx.getLocation({
  type: 'wgs84',
  success: function (res) {
  //2、根據(jù)坐標(biāo)獲取當(dāng)前位置名稱，顯示在頂部:騰訊地圖逆地址解析
  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("調(diào)取失敗")
  }
 })
 },

畫地圖并獲得經(jīng)緯度以及詳細(xì)地址

方法和上面寫的相差無幾，就是多了點(diǎn)wxml的東西

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

<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" 
 scale="14" show-scale show-location > 
 <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>

業(yè)務(wù)需求不能讓用戶搜索以及選點(diǎn)，只能看自己所在位置，再加上開發(fā)者工具上暫不支持比例尺，所以這個(gè)圖就當(dāng)看著意思意思（還有開發(fā)者工具上定位賊不準(zhǔn)，都給我整到區(qū)政府去了，各位在用的時(shí)候還是看自己手機(jī)調(diào)吧）

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

（不是我寫的哈，我只是大佬的搬運(yùn)工QAQ）

/** * 微信小程序JavaScriptSDK *
 * @version 1.0
 * @date 2017-01-10 
* @author jaysonzhou@tencent.com
 */
var ERROR_CONF = {
 KEY_ERR: 311,
 KEY_ERR_MSG: 'key格式錯(cuò)誤',
 PARAM_ERR: 310,
 PARAM_ERR_MSG: '請(qǐng)求參數(shù)信息有誤',
 SYSTEM_ERR: 600,
 SYSTEM_ERR_MSG: '系統(tǒng)錯(cuò)誤',
 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 = {
 /**
  * 得到終點(diǎn)query字符串 
 * @param {Array|String} 檢索數(shù)據(jù)
  */
 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;
 },
 /**
  * 使用微信接口進(jìn)行定位
  */ 
 getWXLocation(success, fail, complete) {
  wx.getLocation({
   type: 'gcj02',
   success: success,
   fail: fail, 
   complete: complete 
  });
 },
 /**
  * 獲取location參數(shù)
  */ 
 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;
 },
 /**
  * 回調(diào)函數(shù)默認(rèn)處理
  */
 polyfillParam(param) {
  param.success = param.success || function () { };
  param.fail = param.fail || function () { };
  param.complete = param.complete || function () { };
 },
 /** 
 * 驗(yàn)證param對(duì)應(yīng)的key值是否為空
  *
  * @param {Object} param 接口參數(shù) 
 * @param {String} key 對(duì)應(yīng)參數(shù)的key
  */
 checkParamKeyEmpty(param, key) {
  if (!param[key]) {
   var errconf = this.buildErrorConfig(ERROR_CONF.PARAM_ERR, ERROR_CONF.PARAM_ERR_MSG + key +'參數(shù)格式有誤');
   param.fail(errconf);
   param.complete(errconf);
   return true;
  }
  return false;
 },
 /**
  * 驗(yàn)證參數(shù)中是否存在檢索詞keyword
  *
  * @param {Object} param 接口參數(shù)
  */
 checkKeyword(param){
  return !this.checkParamKeyEmpty(param, 'keyword');
 },
 /**
  * 驗(yàn)證location值
  *
  * @param {Object} param 接口參數(shù)
  */
 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參數(shù)格式有誤')
   param.fail(errconf);
   param.complete(errconf);
   return false;
  }
  return true;
 },
 /**
  * 構(gòu)造錯(cuò)誤數(shù)據(jù)結(jié)構(gòu)
  * @param {Number} errCode 錯(cuò)誤碼
  * @param {Number} errMsg 錯(cuò)誤描述
  */
 buildErrorConfig(errCode, errMsg) { 
  return {
   status: errCode, 
   message: errMsg 
  };
 },
 /**
  * 構(gòu)造微信請(qǐng)求參數(shù)，公共屬性處理
  *
  * @param {Object} param 接口參數(shù)
  * @param {Object} param 配置項(xiàng)
  */
 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;
 },
 /**
  * 處理用戶參數(shù)是否傳入坐標(biāo)進(jìn)行不同的處理 
 */ 
 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 {
 /**
  * 構(gòu)造函數(shù) 
  *
  * @param {Object} options 接口參數(shù),key 為必選參數(shù)
  */
 constructor(options) {
  if (!options.key) {
   throw Error('key值不能為空');
  }
  this.key = options.key;
 }
 /**
  * POI周邊檢索
  *
  * @param {Object} options 接口參數(shù)對(duì)象
  * 
  * 參數(shù)對(duì)象結(jié)構(gòu)可以參考
  * @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 接口參數(shù)對(duì)象
  *
  * 參數(shù)對(duì)象結(jié)構(gòu)可以參考
  * 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 || '全國(guó)',
   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 接口參數(shù)對(duì)象 
 *
  * 請(qǐng)求參數(shù)結(jié)構(gòu)可以參考
  * 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 接口參數(shù)對(duì)象
  *
  * 請(qǐng)求參數(shù)結(jié)構(gòu)可以參考
  * 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 接口參數(shù)對(duì)象
  *
  * 請(qǐng)求參數(shù)結(jié)構(gòu)可以參考
  * 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
  }));
 }
 /**
  * 獲取對(duì)應(yīng)城市ID的區(qū)縣列表
  *
  * @param {Object} options 接口參數(shù)對(duì)象
  * 
  * 請(qǐng)求參數(shù)結(jié)構(gòu)可以參考
  * 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
  }));
 }
 /**
  * 用于單起點(diǎn)到多終點(diǎn)的路線距離(非直線距離)計(jì)算：
  * 支持兩種距離計(jì)算方式：步行和駕車。
  * 起點(diǎn)到終點(diǎn)最大限制直線距離10公里。
  * 
  * @param {Object} options 接口參數(shù)對(duì)象
  * 
  * 請(qǐng)求參數(shù)結(jié)構(gòu)可以參考
  * 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;

關(guān)于“微信小程序內(nèi)地圖怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。