前言

• 使用uni-app開(kāi)發(fā)小程序時(shí)候使用騰訊地圖原生SDK是，要把原生寫法轉(zhuǎn)成vue寫法在這記錄一下。

• 我們需要注意的是使用高德地圖時(shí)我們不僅要引入SDK，還要再uni-app中配置允許使用。

• 由于uni-app內(nèi)置地圖就是騰訊，所以獲取位置的api，uni.getLocation坐標(biāo)不用轉(zhuǎn)換，直接使用。

• 高德地圖原生sdk搜索，我用地點(diǎn)搜索，渲染結(jié)果。達(dá)到聯(lián)想值效果，點(diǎn)擊跳轉(zhuǎn)。

效果圖

注意點(diǎn)

高德地圖原生SDK：微信小程序JavaScript SDK | 騰訊位置服務(wù)

1.高德地圖原生SDK，地點(diǎn)搜索，和關(guān)鍵詞輸入提示。

他們2個(gè)搜索結(jié)果差不多都是默認(rèn)10條，只不過(guò)關(guān)鍵詞輸入提示回來(lái)的結(jié)果是有地址的，但是我是一進(jìn)到頁(yè)面授權(quán)之后使用uni-app uni.getLocation（）獲取坐標(biāo)。因?yàn)閮?nèi)置就是騰訊，所以可以直接傳值使用。因?yàn)榈攸c(diǎn)搜索的區(qū)域是坐標(biāo)，不設(shè)置就是地圖默認(rèn)的坐標(biāo)。這樣一來(lái)我就可以不設(shè)置使用uni-app自帶定位傳值更合理，把它結(jié)果渲染成聯(lián)想值，點(diǎn)擊跳轉(zhuǎn)。關(guān)鍵詞輸入提示，默認(rèn)搜索區(qū)域是全國(guó)，設(shè)置只能是中文字，這樣的話我們就要使用uni.getLocation（）獲取完地址之后，使用逆地址解析獲取城市，這樣代碼會(huì)多很多，api也調(diào)用多次，不合理，所以我使用地點(diǎn)搜索。下面有圖

?

2.使用uni-app時(shí)，我們要允許使用小程序插件，不然可能會(huì)報(bào)錯(cuò)

uni-app官網(wǎng)

2.1在uni-app/manifest.json/微信小程序/勾選位置接口填寫使用說(shuō)明

2.2或者在uni-app/manifest.json/源碼視圖，直接寫代碼

// 收貨地址和位置信息
        "requiredPrivateInfos": ["getLocation", "chooseLocation", "chooseAddress"],
        "permission": {
         ?  "scope.userLocation": {
         ? ?  "desc": "你的位置信息將用于小程序位置接口的效果展示" 
         ?  }
          }

3.從用戶角度而言，我們應(yīng)該彈出個(gè)授權(quán)框比較合理和好看uni.authorize（）可取uni-app官網(wǎng)搜索查看-下面有完整代碼

4.查看高德地圖原生SDK使用文檔

1.2步主頁(yè)文章有-申請(qǐng)騰訊地圖key

3.隨便下載一個(gè)，我是在uni-app下建立utils/qqmap-wx-jssdk.js放在這里-可直接復(fù)制

/

**
 * 微信小程序JavaScriptSDK
 * 
 * @version 1.1
 * @date 2019-01-20
 */
?
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 EARTH_RADIUS = 6378136.49;
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ì)算角度
 ? ? */
 ?  rad(d) {
 ? ?  return d * Math.PI / 180.0;
 ?  }, ?
 ?  /**
 ? ? * 處理終點(diǎn)location數(shù)組
 ? ? * @return 返回終點(diǎn)數(shù)組
 ? ? */
 ?  getEndLocation(location){
 ? ?  var to = location.split(';');
 ? ?  var endLocation = [];
 ? ?  for (var i = 0; i < to.length; i++) {
 ? ? ?  endLocation.push({
 ? ? ? ?  lat: parseFloat(to[i].split(',')[0]),
 ? ? ? ?  lng: parseFloat(to[i].split(',')[1])
 ? ? ?  })
 ? ?  }
 ? ?  return endLocation;
 ?  },
?
 ?  /**
 ? ? * 計(jì)算兩點(diǎn)間直線距離
 ? ? * @param a 表示緯度差
 ? ? * @param b 表示經(jīng)度差
 ? ? * @return 返回的是距離，單位m
 ? ? */
 ?  getDistance(latFrom, lngFrom, latTo, lngTo) {
 ? ?  var radLatFrom = this.rad(latFrom);
 ? ?  var radLatTo = this.rad(latTo);
 ? ?  var a = radLatFrom - radLatTo;
 ? ?  var b = this.rad(lngFrom) - this.rad(lngTo);
 ? ?  var distance = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLatFrom) * Math.cos(radLatTo) * Math.pow(Math.sin(b / 2), 2)));
 ? ?  distance = distance * EARTH_RADIUS;
 ? ?  distance = Math.round(distance * 10000) / 10000;
 ? ?  return parseFloat(distance.toFixed(0));
 ?  },
 ?  /**
 ? ? * 使用微信接口進(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
 ? ? ?  };
 ?  },
?
 ?  /**
 ? ? * 
 ? ? * 數(shù)據(jù)處理函數(shù)
 ? ? * 根據(jù)傳入?yún)?shù)不同處理不同數(shù)據(jù)
 ? ? * @param {String} feature 功能名稱
 ? ? * search 地點(diǎn)搜索
 ? ? * suggest關(guān)鍵詞提示
 ? ? * reverseGeocoder逆地址解析
 ? ? * geocoder地址解析
 ? ? * getCityList獲取城市列表：父集
 ? ? * getDistrictByCityId獲取區(qū)縣列表：子集
 ? ? * calculateDistance距離計(jì)算
 ? ? * @param {Object} param 接口參數(shù)
 ? ? * @param {Object} data 數(shù)據(jù)
 ? ? */
 ?  handleData(param,data,feature){
 ? ?  if (feature === 'search') {
 ? ? ?  var searchResult = data.data;
 ? ? ?  var searchSimplify = [];
 ? ? ?  for (var i = 0; i < searchResult.length; i++) {
 ? ? ? ?  searchSimplify.push({
 ? ? ? ? ?  id: searchResult[i].id || null,
 ? ? ? ? ?  title: searchResult[i].title || null,
 ? ? ? ? ?  latitude: searchResult[i].location && searchResult[i].location.lat || null,
 ? ? ? ? ?  longitude: searchResult[i].location && searchResult[i].location.lng || null,
 ? ? ? ? ?  address: searchResult[i].address || null,
 ? ? ? ? ?  category: searchResult[i].category || null,
 ? ? ? ? ?  tel: searchResult[i].tel || null,
 ? ? ? ? ?  adcode: searchResult[i].ad_info && searchResult[i].ad_info.adcode || null,
 ? ? ? ? ?  city: searchResult[i].ad_info && searchResult[i].ad_info.city || null,
 ? ? ? ? ?  district: searchResult[i].ad_info && searchResult[i].ad_info.district || null,
 ? ? ? ? ?  province: searchResult[i].ad_info && searchResult[i].ad_info.province || null
 ? ? ? ?  })
 ? ? ?  }
 ? ? ?  param.success(data, {
 ? ? ? ?  searchResult: searchResult,
 ? ? ? ?  searchSimplify: searchSimplify
 ? ? ?  })
 ? ?  } else if (feature === 'suggest') {
 ? ? ?  var suggestResult = data.data;
 ? ? ?  var suggestSimplify = [];
 ? ? ?  for (var i = 0; i < suggestResult.length; i++) {
 ? ? ? ?  suggestSimplify.push({
 ? ? ? ? ?  adcode: suggestResult[i].adcode || null,
 ? ? ? ? ?  address: suggestResult[i].address || null,
 ? ? ? ? ?  category: suggestResult[i].category || null,
 ? ? ? ? ?  city: suggestResult[i].city || null,
 ? ? ? ? ?  district: suggestResult[i].district || null,
 ? ? ? ? ?  id: suggestResult[i].id || null,
 ? ? ? ? ?  latitude: suggestResult[i].location && suggestResult[i].location.lat || null,
 ? ? ? ? ?  longitude: suggestResult[i].location && suggestResult[i].location.lng || null,
 ? ? ? ? ?  province: suggestResult[i].province || null,
 ? ? ? ? ?  title: suggestResult[i].title || null,
 ? ? ? ? ?  type: suggestResult[i].type || null
 ? ? ? ?  })
 ? ? ?  }
 ? ? ?  param.success(data, {
 ? ? ? ?  suggestResult: suggestResult,
 ? ? ? ?  suggestSimplify: suggestSimplify
 ? ? ? ?  })
 ? ?  } else if (feature === 'reverseGeocoder') {
 ? ? ?  var reverseGeocoderResult = data.result;
 ? ? ?  var reverseGeocoderSimplify = {
 ? ? ? ?  address: reverseGeocoderResult.address || null,
 ? ? ? ?  latitude: reverseGeocoderResult.location && reverseGeocoderResult.location.lat || null,
 ? ? ? ?  longitude: reverseGeocoderResult.location && reverseGeocoderResult.location.lng || null,
 ? ? ? ?  adcode: reverseGeocoderResult.ad_info && reverseGeocoderResult.ad_info.adcode || null,
 ? ? ? ?  city: reverseGeocoderResult.address_component && reverseGeocoderResult.address_component.city || null,
 ? ? ? ?  district: reverseGeocoderResult.address_component && reverseGeocoderResult.address_component.district || null,
 ? ? ? ?  nation: reverseGeocoderResult.address_component && reverseGeocoderResult.address_component.nation || null,
 ? ? ? ?  province: reverseGeocoderResult.address_component && reverseGeocoderResult.address_component.province || null,
 ? ? ? ?  street: reverseGeocoderResult.address_component && reverseGeocoderResult.address_component.street || null,
 ? ? ? ?  street_number: reverseGeocoderResult.address_component && reverseGeocoderResult.address_component.street_number || null,
 ? ? ? ?  recommend: reverseGeocoderResult.formatted_addresses && reverseGeocoderResult.formatted_addresses.recommend || null,
 ? ? ? ?  rough: reverseGeocoderResult.formatted_addresses && reverseGeocoderResult.formatted_addresses.rough || null
 ? ? ?  };
 ? ? ?  if (reverseGeocoderResult.pois) {//判斷是否返回周邊poi
 ? ? ? ?  var pois = reverseGeocoderResult.pois;
 ? ? ? ?  var poisSimplify = [];
 ? ? ? ?  for (var i = 0;i < pois.length;i++) {
 ? ? ? ? ?  poisSimplify.push({
 ? ? ? ? ? ?  id: pois[i].id || null,
 ? ? ? ? ? ?  title: pois[i].title || null,
 ? ? ? ? ? ?  latitude: pois[i].location && pois[i].location.lat || null,
 ? ? ? ? ? ?  longitude: pois[i].location && pois[i].location.lng || null,
 ? ? ? ? ? ?  address: pois[i].address || null,
 ? ? ? ? ? ?  category: pois[i].category || null,
 ? ? ? ? ? ?  adcode: pois[i].ad_info && pois[i].ad_info.adcode || null,
 ? ? ? ? ? ?  city: pois[i].ad_info && pois[i].ad_info.city || null,
 ? ? ? ? ? ?  district: pois[i].ad_info && pois[i].ad_info.district || null,
 ? ? ? ? ? ?  province: pois[i].ad_info && pois[i].ad_info.province || null
 ? ? ? ? ?  })
 ? ? ? ?  }
 ? ? ? ?  param.success(data,{
 ? ? ? ? ?  reverseGeocoderResult: reverseGeocoderResult,
 ? ? ? ? ?  reverseGeocoderSimplify: reverseGeocoderSimplify,
 ? ? ? ? ?  pois: pois,
 ? ? ? ? ?  poisSimplify: poisSimplify
 ? ? ? ?  })
 ? ? ?  } else {
 ? ? ? ?  param.success(data, {
 ? ? ? ? ?  reverseGeocoderResult: reverseGeocoderResult,
 ? ? ? ? ?  reverseGeocoderSimplify: reverseGeocoderSimplify
 ? ? ? ?  })
 ? ? ?  }
 ? ?  } else if (feature === 'geocoder') {
 ? ? ?  var geocoderResult = data.result;
 ? ? ?  var geocoderSimplify = {
 ? ? ? ?  title: geocoderResult.title || null,
 ? ? ? ?  latitude: geocoderResult.location && geocoderResult.location.lat || null,
 ? ? ? ?  longitude: geocoderResult.location && geocoderResult.location.lng || null,
 ? ? ? ?  adcode: geocoderResult.ad_info && geocoderResult.ad_info.adcode || null,
 ? ? ? ?  province: geocoderResult.address_components && geocoderResult.address_components.province || null,
 ? ? ? ?  city: geocoderResult.address_components && geocoderResult.address_components.city || null,
 ? ? ? ?  district: geocoderResult.address_components && geocoderResult.address_components.district || null,
 ? ? ? ?  street: geocoderResult.address_components && geocoderResult.address_components.street || null,
 ? ? ? ?  street_number: geocoderResult.address_components && geocoderResult.address_components.street_number || null,
 ? ? ? ?  level: geocoderResult.level || null
 ? ? ?  };
 ? ? ?  param.success(data,{
 ? ? ? ?  geocoderResult: geocoderResult,
 ? ? ? ?  geocoderSimplify: geocoderSimplify
 ? ? ?  });
 ? ?  } else if (feature === 'getCityList') {
 ? ? ?  var provinceResult = data.result[0];
 ? ? ?  var cityResult = data.result[1];
 ? ? ?  var districtResult = data.result[2];
 ? ? ?  param.success(data,{
 ? ? ? ?  provinceResult: provinceResult,
 ? ? ? ?  cityResult: cityResult,
 ? ? ? ?  districtResult: districtResult
 ? ? ?  });
 ? ?  } else if (feature === 'getDistrictByCityId') {
 ? ? ?  var districtByCity = data.result[0];
 ? ? ?  param.success(data, districtByCity);
 ? ?  } else if (feature === 'calculateDistance') {
 ? ? ?  var calculateDistanceResult = data.result.elements; ?
 ? ? ?  var distance = [];
 ? ? ?  for (var i = 0; i < calculateDistanceResult.length; i++){
 ? ? ? ?  distance.push(calculateDistanceResult[i].distance);
 ? ? ?  } ? 
 ? ? ?  param.success(data, {
 ? ? ? ?  calculateDistanceResult: calculateDistanceResult,
 ? ? ? ?  distance: distance
 ? ? ? ?  });
 ? ?  } else {
 ? ? ?  param.success(data);
 ? ?  }
 ?  },
?
 ?  /**
 ? ? * 構(gòu)造微信請(qǐng)求參數(shù)，公共屬性處理
 ? ? * 
 ? ? * @param {Object} param 接口參數(shù)
 ? ? * @param {Object} param 配置項(xiàng)
 ? ? * @param {String} feature 方法名
 ? ? */
 ?  buildWxRequestConfig(param, options, feature) {
 ? ? ?  var that = this;
 ? ? ?  options.header = { "content-type": "application/json" };
 ? ? ?  options.method = 'GET';
 ? ? ?  options.success = function (res) {
 ? ? ? ? ?  var data = res.data;
 ? ? ? ? ?  if (data.status === 0) {
 ? ? ? ? ? ?  that.handleData(param, data, feature);
 ? ? ? ? ?  } else {
 ? ? ? ? ? ? ?  param.fail(data);
 ? ? ? ? ?  }
 ? ? ?  };
 ? ? ?  options.fail = function (res) {
 ? ? ? ? ?  res.statusCode = ERROR_CONF.WX_ERR_CODE;
 ? ? ? ? ?  param.fail(that.buildErrorConfig(ERROR_CONF.WX_ERR_CODE, res.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 region = null;
 ? ? ?  var rectangle = null;
?
 ? ? ?  //判斷城市限定參數(shù)
 ? ? ?  if (options.region) {
 ? ? ? ?  region = options.region;
 ? ? ?  }
?
 ? ? ?  //矩形限定坐標(biāo)(暫時(shí)只支持字符串格式)
 ? ? ?  if (options.rectangle) {
 ? ? ? ?  rectangle = options.rectangle;
 ? ? ?  }
?
 ? ? ?  var locationsuccess = function (result) { ? ? ? ?
 ? ? ? ?  if (region && !rectangle) {
 ? ? ? ? ?  //城市限定參數(shù)拼接
 ? ? ? ? ?  requestParam.boundary = "region(" + region + "," + auto_extend + "," + result.latitude + "," + result.longitude + ")";
 ? ? ? ?  } else if (rectangle && !region) {
 ? ? ? ? ?  //矩形搜索
 ? ? ? ? ?  requestParam.boundary = "rectangle(" + rectangle + ")";
 ? ? ? ? ?  } else {
 ? ? ? ? ? ?  requestParam.boundary = "nearby(" + result.latitude + "," + result.longitude + "," + distance + "," + auto_extend + ")";
 ? ? ? ? ?  } ? ? ? ? ? ?
 ? ? ? ? ?  wx.request(Utils.buildWxRequestConfig(options, {
 ? ? ? ? ? ? ?  url: URL_SEARCH,
 ? ? ? ? ? ? ?  data: requestParam
 ? ? ? ? ?  }, 'search'));
 ? ? ?  };
 ? ? ?  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,
 ? ? ? ? ?  page_size: options.page_size || 10,//控制顯示條數(shù)
 ? ? ? ? ?  page_index: options.page_index || 1,//控制頁(yè)數(shù)
 ? ? ? ? ?  get_subpois : options.get_subpois || 0,//返回子地點(diǎn)
 ? ? ? ? ?  output: 'json',
 ? ? ? ? ?  key: that.key
 ? ? ?  };
 ? ? ?  //長(zhǎng)地址
 ? ? ?  if (options.address_format) {
 ? ? ? ?  requestParam.address_format = options.address_format;
 ? ? ?  }
 ? ? ?  //過(guò)濾
 ? ? ?  if (options.filter) {
 ? ? ? ?  requestParam.filter = options.filter;
 ? ? ?  }
 ? ? ?  //排序
 ? ? ?  if (options.location) {
 ? ? ? ?  var locationsuccess = function (result) {
 ? ? ? ? ?  requestParam.location = result.latitude + ',' + result.longitude;
 ? ? ? ? ?  wx.request(Utils.buildWxRequestConfig(options, {
 ? ? ? ? ? ?  url: URL_SUGGESTION,
 ? ? ? ? ? ?  data: requestParam
 ? ? ? ? ?  }, "suggest")); ? ? ?
 ? ? ? ?  };
 ? ? ? ?  Utils.locationProcess(options, locationsuccess);
 ? ? ?  } else {
 ? ? ? ?  wx.request(Utils.buildWxRequestConfig(options, {
 ? ? ? ? ?  url: URL_SUGGESTION,
 ? ? ? ? ?  data: requestParam
 ? ? ? ?  }, "suggest")); ? ? ?
 ? ? ?  } 
 ?  };
?
 ?  /**
 ? ? * 逆地址解析
 ? ? *
 ? ? * @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
 ? ? ? ? ?  }, 'reverseGeocoder'));
 ? ? ?  };
 ? ? ?  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
 ? ? ?  };
?
 ? ? ?  //城市限定
 ? ? ?  if (options.region) {
 ? ? ? ?  requestParam.region = options.region;
 ? ? ?  }
?
 ? ? ?  wx.request(Utils.buildWxRequestConfig(options, {
 ? ? ? ? ?  url: URL_GET_GEOCODER,
 ? ? ? ? ?  data: requestParam
 ? ? ?  },'geocoder'));
 ?  };
?
?
 ?  /**
 ? ? * 獲取城市列表
 ? ? *
 ? ? * @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
 ? ? ?  },'getCityList'));
 ?  };
?
 ?  /**
 ? ? * 獲取對(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
 ? ? ?  },'getDistrictByCityId'));
 ?  };
?
 ?  /**
 ? ? * 用于單起點(diǎn)到多終點(diǎn)的路線距離(非直線距離)計(jì)算：
 ? ? * 支持兩種距離計(jì)算方式：步行和駕車。
 ? ? * 起點(diǎn)到終點(diǎn)最大限制直線距離10公里。
 ? ? *
 ? ? * 新增直線距離計(jì)算。
 ? ? * 
 ? ? * @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
 ? ? ?  };
?
 ? ? ?  if (options.from) {
 ? ? ? ?  options.location = options.from;
 ? ? ?  }
?
 ? ? ?  //計(jì)算直線距離
 ? ? ?  if(requestParam.mode == 'straight'){ ? ? ? ?
 ? ? ? ?  var locationsuccess = function (result) {
 ? ? ? ? ?  var locationTo = Utils.getEndLocation(requestParam.to);//處理終點(diǎn)坐標(biāo)
 ? ? ? ? ?  var data = {
 ? ? ? ? ? ?  message:"query ok",
 ? ? ? ? ? ?  result:{
 ? ? ? ? ? ? ?  elements:[]
 ? ? ? ? ? ?  },
 ? ? ? ? ? ?  status:0
 ? ? ? ? ?  };
 ? ? ? ? ?  for (var i = 0; i < locationTo.length; i++) {
 ? ? ? ? ? ?  data.result.elements.push({//將坐標(biāo)存入
 ? ? ? ? ? ? ?  distance: Utils.getDistance(result.latitude, result.longitude, locationTo[i].lat, locationTo[i].lng),
 ? ? ? ? ? ? ?  duration:0,
 ? ? ? ? ? ? ?  from:{
 ? ? ? ? ? ? ? ?  lat: result.latitude,
 ? ? ? ? ? ? ? ?  lng:result.longitude
 ? ? ? ? ? ? ?  },
 ? ? ? ? ? ? ?  to:{
 ? ? ? ? ? ? ? ?  lat: locationTo[i].lat,
 ? ? ? ? ? ? ? ?  lng: locationTo[i].lng
 ? ? ? ? ? ? ?  }
 ? ? ? ? ? ?  }); ? ? ? ? ? ?
 ? ? ? ? ?  }
 ? ? ? ? ?  var calculateResult = data.result.elements;
 ? ? ? ? ?  var distanceResult = [];
 ? ? ? ? ?  for (var i = 0; i < calculateResult.length; i++) {
 ? ? ? ? ? ?  distanceResult.push(calculateResult[i].distance);
 ? ? ? ? ?  } ?
 ? ? ? ? ?  return options.success(data,{
 ? ? ? ? ? ?  calculateResult: calculateResult,
 ? ? ? ? ? ?  distanceResult: distanceResult
 ? ? ? ? ?  });
 ? ? ? ?  };
 ? ? ? ? ?
 ? ? ? ?  Utils.locationProcess(options, locationsuccess);
 ? ? ?  } else {
 ? ? ? ?  var locationsuccess = function (result) {
 ? ? ? ? ?  requestParam.from = result.latitude + ',' + result.longitude;
 ? ? ? ? ?  wx.request(Utils.buildWxRequestConfig(options, {
 ? ? ? ? ? ?  url: URL_DISTANCE,
 ? ? ? ? ? ?  data: requestParam
 ? ? ? ? ?  },'calculateDistance'));
 ? ? ? ?  };
?
 ? ? ? ?  Utils.locationProcess(options, locationsuccess);
 ? ? ?  } ? ? ?
 ?  }
};
?
module.exports = QQMapWX;

4.去自己小程序后臺(tái)配置，要不然請(qǐng)求不到，在開(kāi)發(fā)管理-開(kāi)發(fā)設(shè)置-服務(wù)器域名配置

https://apis.map.qq.com

5.我把原生小程序語(yǔ)法轉(zhuǎn)成vue語(yǔ)法代碼如下

注意：直接復(fù)制會(huì)報(bào)錯(cuò)，記得在uni-app中配置允許（上面有），記得引入SDK，我還有定位圖片記得替換。

<template>
    <view class="container">
        <!--綁定點(diǎn)擊事件-->
        <view class="tip">
            <input class="uni-input" @input="nearby_search" v-model="changeValue" focus
                placeholder="請(qǐng)輸入地址" /><!-- <span @click="nearby_search">搜索</span> -->
        </view>
        <!--關(guān)鍵詞輸入提示列表渲染-->
        <view class="conter">
            <view class="associate" @click="backfill(item)" v-for="(item,index) in suggestion" :key="index">
                <!--根據(jù)需求渲染相應(yīng)數(shù)據(jù)-->
                <!--渲染地址title-->
                <view class="title">{{item.title}}</view>
                <!--渲染詳細(xì)地址-->
                <view class="site">{{item.category}}</view>
            </view>
        </view>
        <!--地圖容器-->
        <map id="myMap" :markers="markers" style="width:100%;height:100vh;" :longitude="longitude" :latitude="latitude"
            scale='16'>
        </map>
    </view>
</template>
?
<script>
    import QQMapWX from '@/utils/qqmap-wx-jssdk.js'
    export default {
        data() {
            return {
                // 經(jīng)度
                longitude: '',
                // 緯度
                latitude: '',
                markers: [],
                // 騰訊地圖實(shí)例
                qqmapsdk: '',
                // 輸入框值
                changeValue: '',
                // 聯(lián)想值
                suggestion: [],
                // 防抖
                time: null
            }
?
        },
        onLoad() {
            const that = this
            // uni-app 授權(quán)彈出框
            uni.authorize({
                // 獲取
                scope: 'scope.userLocation',
                success() {
                    that.getLocation()
                    // 獲取用戶的當(dāng)前設(shè)置。
                    uni.getSetting({
                        success(res) {
                            console.log(res)
                        }
                    })
                },
                fail() {
                    console.log('失敗了');
                }
            })
        },
        methods: {
            // 獲取定位 生成地圖實(shí)例
            getLocation() {
                // 作用域問(wèn)題
                const that = this
                uni.getLocation({
                    type: 'wgs84',
                    success: function(res) {
                        console.log('當(dāng)前位置的經(jīng)度：' + res.longitude)
                        console.log('當(dāng)前位置的緯度：' + res.latitude)
                        that.longitude = res.longitude
                        that.latitude = res.latitude
                        that.qqmapsdk = new QQMapWX({
                            key: '你的key'
                        });
                        let mks = [];
                        mks.push({ // 獲取返回結(jié)果，放到mks數(shù)組中
                            title: '當(dāng)前定位',
                            id: '9999',
                            latitude: res.latitude,
                            longitude: res.longitude,
                            iconPath: "../../static/定位.png", //圖標(biāo)路徑
                            width: 20,
                            height: 20
                        })
                        that.markers = mks
                    }
                })
            },
            // 事件觸發(fā)，調(diào)用接口
            nearby_search() {
                console.log('值', this.changeValue);
                if (!this.changeValue) {
                    this.suggestion = []
                    return uni.$showToast('請(qǐng)輸入內(nèi)容')
                }
                const that = this;
                // 調(diào)用接口
                // 輸入框防抖
                clearTimeout(this.time)
                that.time = setTimeout(() => {
                    that.qqmapsdk.search({
                        //搜索關(guān)鍵詞
                        keyword: that.changeValue,
                        //設(shè)置周邊搜索中心點(diǎn) 
                        // 設(shè)置就是以這里為中心點(diǎn)搜索，注釋掉也可以，以地圖為中心搜索
                        // location: '39.980014,116.313972',
                        //搜索成功后的回調(diào)
                        success: (res) => {
                            console.log('有結(jié)果');
                            that.suggestion = res.data
                            let mks = []
                            for (let i = 0; i < res.data.length; i++) {
                                mks.push({ // 獲取返回結(jié)果，放到mks數(shù)組中
                                    title: res.data[i].title,
                                    id: res.data[i].id,
                                    latitude: res.data[i].location.lat,
                                    longitude: res.data[i].location.lng,
                                    category: res.data[i].category,
                                    iconPath: "../../static/定位.png", //圖標(biāo)路徑
                                    width: 20,
                                    height: 20
                                })
                            }
                            //設(shè)置markers屬性，將搜索結(jié)果顯示在地圖中
                            // that.markers = mks
                            that.suggestion = mks
                        },
                        fail: function(res) {
                            console.log(res);
                        },
                        complete: function(res) {
                            console.log(res);
                        }
                    });
                }, 2000)
            },
            // 聯(lián)想值的點(diǎn)擊事件
            backfill(items) {
                console.log('id', items);
                const that = this
                console.log('12', items.longitude);
                console.log('23', items.latitude);
                that.longitude = items.longitude
                that.latitude = items.latitude
                that.suggestion.forEach(item => {
                    if (item.id == items.id) {
                        that.changeValue = item.title
                        let mks = []
                        mks.push({ // 獲取返回結(jié)果，放到mks數(shù)組中
                            title: items.title,
                            id: items.id,
                            latitude: items.latitude,
                            longitude: items.longitude,
                            iconPath: "../../static/定位.png", //圖標(biāo)路徑
                            width: 20,
                            height: 20
                        })
                        //設(shè)置markers屬性，將搜索結(jié)果顯示在地圖中
                        that.suggestion = []
                        that.markers = mks
                    }
                })
            },
        }
    }
</script>
?
<style lang="scss">
    .container {
        .tip {
            height: 40px;
            width: 280px;
            border: 1px solid #ccc;
            display: flex;
            align-items: center;
            background-color: #fff;
            border-radius: 3px;
            position: fixed;
            top: 10px;
            left: 10px;
            z-index: 200;
?
            .uni-input {
                flex: 1;
                height: 100%;
                padding-left: 5px;
            }
?
            span {
                width: 40px;
                color: #8b8c8f;
            }
        }
?
        .conter {
            width: 280px;
            background-color: #ffffff;
            margin-top: 10rpx;
            position: fixed;
            top: 52px;
            left: 10px;
            z-index: 20;
            border-radius: 3px;
?
            .associate {
                height: 40px;
                border-bottom: 1px solid #ccc;
                padding: 0 8px;
                overflow: hidden;
?
                .title {
                    font-size: 15px;
                }
?
                .site {
                    font-size: 12px;
                }
            }
        }
    }
</style>

總結(jié)：

經(jīng)過(guò)這一趟流程下來(lái)相信你也對(duì) uni-app 小程序使用騰訊地圖完成搜索功能 有了初步的深刻印象，但在實(shí)際開(kāi)發(fā)中我 們遇到的情況肯定是不一樣的，所以我們要理解它的原理，萬(wàn)變不離其宗。加油，打工人！

什么不足的地方請(qǐng)大家指出謝謝 -- 風(fēng)過(guò)無(wú)痕文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-478984.html

到了這里，關(guān)于uni-app 小程序使用騰訊地圖完成搜索功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！