微信小程序內地圖怎么用

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

前言   

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

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

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

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

使用

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

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

記得在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 > 
 <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;

關于“微信小程序內地圖怎么用”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。