這段時間因為項目中使用到地圖選址，由于第一次在uniapp中使用地圖選址功能，全部都是網上查找相關資料，遇到很多坑，后面自己從新利用map組件寫了一個，下面方法列出來，uniapp騰訊地圖key申請與部署就不寫了，自行百度，僅供參考

方法一

騰訊地圖官網地圖官網地圖選址組件?地圖組件 | 騰訊位置服務

優點：使用簡單，代碼簡潔

缺點：定位不準，如果通過uni.getLocation獲取定位經緯度傳入，組件自帶一個箭頭點擊回到我的位置，我的位置會出現空白

<template><div class="map-warp"><!--#ifdef H5--><web-view :src="url"@message="onMessage"></web-view><!--#endif--></div> </template><script>export default {data() {return {height: uni.getSystemInfoSync().screenHeight,url:''}},onLoad(option) {if(option){this.url=`https://apis.map.qq.com/tools/locpicker?search=1&type=1&coord=${option.lat},${option.lon}&policy=1&key=HTLBZ-AFZC3-IC435-YTBCH-PJTQQ-RRF7V&referer=myapp`}},onReady() {const self = this//#ifdef H5if (window.isListen) {// 防止多次注冊addEventListener事件return}window.addEventListener('message', function (event) {var loc = event.data;if (loc && loc.module == 'locationPicker') {console.log('location', loc);self.getPositon(loc, self)};window.isListen = truewindow.removeEventListener('message', function() {}, true)}, false)//#endif},methods: {onMessage(res) {console.log('app接收網頁消息:', res.detail.data[0])this.getPositon(res.detail.data[0], this)},getPositon(res, self) {uni.$emit('onAddressChange', res)setTimeout(function() {uni.navigateBack({delta: 1});}, 500)}}, } </script><style scoped lang="scss"> </style>

方法二

自己根據uniapp官網map標簽實現?map | uni-app官網

這里因為項目時間比較敢，沒有實現搜索，后面有時間了補上

小程序JavascriptSDK使用指南 - 微信小程序解決方案 | 騰訊位置服務騰訊位置服務 小程序JS SDK下載鏈接?解壓后，將qqmap-wx-jssdk.min.js放入項目目錄中

小程序JavascriptSDK使用指南 - 微信小程序解決方案 | 騰訊位置服務

因為H5涉及到跨域，所以qqmap-wx-jssdk.min,js需要修改,可直接復制

效果：

?

//引入vue import Vue from "vue" // 下載vue-jsonp引入 這里我是在mian.js引入 import { VueJsonp } from 'vue-jsonp' Vue.use(VueJsonp) //必須實例化 var ve = new Vue() var vm='' /*** 這里是重寫部分*/ var wx = {request(obj){obj.data.output = 'jsonp've.$jsonp(obj.url,obj.data).then(json => {if(json.status == 0){obj.success(json)}else {obj.fail(json)}}).catch(err => {obj.fail(err)})} }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 URL_DIRECTION = BASE_URL + 'direction/v1/'; var MODE = {driving: 'driving',transit: 'transit' }; var EARTH_RADIUS = 6378136.49; var Utils = {/*** md5加密方法* 版權所有?2011 Sebastian Tschan，https：//blueimp.net*/safeAdd(x, y) {var lsw = (x & 0xffff) + (y & 0xffff);var msw = (x >> 16) + (y >> 16) + (lsw >> 16);return (msw << 16) | (lsw & 0xffff);},bitRotateLeft(num, cnt) {return (num << cnt) | (num >>> (32 - cnt));},md5cmn(q, a, b, x, s, t) {return this.safeAdd(this.bitRotateLeft(this.safeAdd(this.safeAdd(a, q), this.safeAdd(x, t)), s), b);},md5ff(a, b, c, d, x, s, t) {return this.md5cmn((b & c) | (~b & d), a, b, x, s, t);},md5gg(a, b, c, d, x, s, t) {return this.md5cmn((b & d) | (c & ~d), a, b, x, s, t);},md5hh(a, b, c, d, x, s, t) {return this.md5cmn(b ^ c ^ d, a, b, x, s, t);},md5ii(a, b, c, d, x, s, t) {return this.md5cmn(c ^ (b | ~d), a, b, x, s, t);},binlMD5(x, len) {/* append padding */x[len >> 5] |= 0x80 << (len % 32);x[((len + 64) >>> 9 << 4) + 14] = len;var i;var olda;var oldb;var oldc;var oldd;var a = 1732584193;var b = -271733879;var c = -1732584194;var d = 271733878;for (i = 0; i < x.length; i += 16) {olda = a;oldb = b;oldc = c;oldd = d;a = this.md5ff(a, b, c, d, x[i], 7, -680876936);d = this.md5ff(d, a, b, c, x[i + 1], 12, -389564586);c = this.md5ff(c, d, a, b, x[i + 2], 17, 606105819);b = this.md5ff(b, c, d, a, x[i + 3], 22, -1044525330);a = this.md5ff(a, b, c, d, x[i + 4], 7, -176418897);d = this.md5ff(d, a, b, c, x[i + 5], 12, 1200080426);c = this.md5ff(c, d, a, b, x[i + 6], 17, -1473231341);b = this.md5ff(b, c, d, a, x[i + 7], 22, -45705983);a = this.md5ff(a, b, c, d, x[i + 8], 7, 1770035416);d = this.md5ff(d, a, b, c, x[i + 9], 12, -1958414417);c = this.md5ff(c, d, a, b, x[i + 10], 17, -42063);b = this.md5ff(b, c, d, a, x[i + 11], 22, -1990404162);a = this.md5ff(a, b, c, d, x[i + 12], 7, 1804603682);d = this.md5ff(d, a, b, c, x[i + 13], 12, -40341101);c = this.md5ff(c, d, a, b, x[i + 14], 17, -1502002290);b = this.md5ff(b, c, d, a, x[i + 15], 22, 1236535329);a = this.md5gg(a, b, c, d, x[i + 1], 5, -165796510);d = this.md5gg(d, a, b, c, x[i + 6], 9, -1069501632);c = this.md5gg(c, d, a, b, x[i + 11], 14, 643717713);b = this.md5gg(b, c, d, a, x[i], 20, -373897302);a = this.md5gg(a, b, c, d, x[i + 5], 5, -701558691);d = this.md5gg(d, a, b, c, x[i + 10], 9, 38016083);c = this.md5gg(c, d, a, b, x[i + 15], 14, -660478335);b = this.md5gg(b, c, d, a, x[i + 4], 20, -405537848);a = this.md5gg(a, b, c, d, x[i + 9], 5, 568446438);d = this.md5gg(d, a, b, c, x[i + 14], 9, -1019803690);c = this.md5gg(c, d, a, b, x[i + 3], 14, -187363961);b = this.md5gg(b, c, d, a, x[i + 8], 20, 1163531501);a = this.md5gg(a, b, c, d, x[i + 13], 5, -1444681467);d = this.md5gg(d, a, b, c, x[i + 2], 9, -51403784);c = this.md5gg(c, d, a, b, x[i + 7], 14, 1735328473);b = this.md5gg(b, c, d, a, x[i + 12], 20, -1926607734);a = this.md5hh(a, b, c, d, x[i + 5], 4, -378558);d = this.md5hh(d, a, b, c, x[i + 8], 11, -2022574463);c = this.md5hh(c, d, a, b, x[i + 11], 16, 1839030562);b = this.md5hh(b, c, d, a, x[i + 14], 23, -35309556);a = this.md5hh(a, b, c, d, x[i + 1], 4, -1530992060);d = this.md5hh(d, a, b, c, x[i + 4], 11, 1272893353);c = this.md5hh(c, d, a, b, x[i + 7], 16, -155497632);b = this.md5hh(b, c, d, a, x[i + 10], 23, -1094730640);a = this.md5hh(a, b, c, d, x[i + 13], 4, 681279174);d = this.md5hh(d, a, b, c, x[i], 11, -358537222);c = this.md5hh(c, d, a, b, x[i + 3], 16, -722521979);b = this.md5hh(b, c, d, a, x[i + 6], 23, 76029189);a = this.md5hh(a, b, c, d, x[i + 9], 4, -640364487);d = this.md5hh(d, a, b, c, x[i + 12], 11, -421815835);c = this.md5hh(c, d, a, b, x[i + 15], 16, 530742520);b = this.md5hh(b, c, d, a, x[i + 2], 23, -995338651);a = this.md5ii(a, b, c, d, x[i], 6, -198630844);d = this.md5ii(d, a, b, c, x[i + 7], 10, 1126891415);c = this.md5ii(c, d, a, b, x[i + 14], 15, -1416354905);b = this.md5ii(b, c, d, a, x[i + 5], 21, -57434055);a = this.md5ii(a, b, c, d, x[i + 12], 6, 1700485571);d = this.md5ii(d, a, b, c, x[i + 3], 10, -1894986606);c = this.md5ii(c, d, a, b, x[i + 10], 15, -1051523);b = this.md5ii(b, c, d, a, x[i + 1], 21, -2054922799);a = this.md5ii(a, b, c, d, x[i + 8], 6, 1873313359);d = this.md5ii(d, a, b, c, x[i + 15], 10, -30611744);c = this.md5ii(c, d, a, b, x[i + 6], 15, -1560198380);b = this.md5ii(b, c, d, a, x[i + 13], 21, 1309151649);a = this.md5ii(a, b, c, d, x[i + 4], 6, -145523070);d = this.md5ii(d, a, b, c, x[i + 11], 10, -1120210379);c = this.md5ii(c, d, a, b, x[i + 2], 15, 718787259);b = this.md5ii(b, c, d, a, x[i + 9], 21, -343485551);a = this.safeAdd(a, olda);b = this.safeAdd(b, oldb);c = this.safeAdd(c, oldc);d = this.safeAdd(d, oldd);}return [a, b, c, d];},binl2rstr(input) {var i;var output = '';var length32 = input.length * 32;for (i = 0; i < length32; i += 8) {output += String.fromCharCode((input[i >> 5] >>> (i % 32)) & 0xff);}return output;},rstr2binl(input) {var i;var output = [];output[(input.length >> 2) - 1] = undefined;for (i = 0; i < output.length; i += 1) {output[i] = 0;}var length8 = input.length * 8;for (i = 0; i < length8; i += 8) {output[i >> 5] |= (input.charCodeAt(i / 8) & 0xff) << (i % 32);}return output;},rstrMD5(s) {return this.binl2rstr(this.binlMD5(this.rstr2binl(s), s.length * 8));},rstrHMACMD5(key, data) {var i;var bkey = this.rstr2binl(key);var ipad = [];var opad = [];var hash;ipad[15] = opad[15] = undefined;if (bkey.length > 16) {bkey = this.binlMD5(bkey, key.length * 8);}for (i = 0; i < 16; i += 1) {ipad[i] = bkey[i] ^ 0x36363636;opad[i] = bkey[i] ^ 0x5c5c5c5c;}hash = this.binlMD5(ipad.concat(this.rstr2binl(data)), 512 + data.length * 8);return this.binl2rstr(this.binlMD5(opad.concat(hash), 512 + 128));},rstr2hex(input) {var hexTab = '0123456789abcdef';var output = '';var x;var i;for (i = 0; i < input.length; i += 1) {x = input.charCodeAt(i);output += hexTab.charAt((x >>> 4) & 0x0f) + hexTab.charAt(x & 0x0f);}return output;},str2rstrUTF8(input) {return unescape(encodeURIComponent(input));},rawMD5(s) {return this.rstrMD5(this.str2rstrUTF8(s));},hexMD5(s) {return this.rstr2hex(this.rawMD5(s));},rawHMACMD5(k, d) {return this.rstrHMACMD5(this.str2rstrUTF8(k), str2rstrUTF8(d));},hexHMACMD5(k, d) {return this.rstr2hex(this.rawHMACMD5(k, d));},md5(string, key, raw) {if (!key) {if (!raw) {return this.hexMD5(string);}return this.rawMD5(string);}if (!raw) {return this.hexHMACMD5(key, string);}return this.rawHMACMD5(key, string);},/*** 得到md5加密后的sig參數* @param {Object} requestParam 接口參數* @param {String} sk簽名字符串* @param {String} featrue 方法名* @return 返回加密后的sig參數*/getSig(requestParam, sk, feature, mode) {var sig = null;var requestArr = [];Object.keys(requestParam).sort().forEach(function(key){requestArr.push(key + '=' + requestParam[key]);});if (feature == 'search') {sig = '/ws/place/v1/search?' + requestArr.join('&') + sk;}if (feature == 'suggest') {sig = '/ws/place/v1/suggestion?' + requestArr.join('&') + sk;}if (feature == 'reverseGeocoder') {sig = '/ws/geocoder/v1/?' + requestArr.join('&') + sk;}if (feature == 'geocoder') {sig = '/ws/geocoder/v1/?' + requestArr.join('&') + sk;}if (feature == 'getCityList') {sig = '/ws/district/v1/list?' + requestArr.join('&') + sk;}if (feature == 'getDistrictByCityId') {sig = '/ws/district/v1/getchildren?' + requestArr.join('&') + sk;}if (feature == 'calculateDistance') {sig = '/ws/distance/v1/?' + requestArr.join('&') + sk;}if (feature == 'direction') {sig = '/ws/direction/v1/' + mode + '?' + requestArr.join('&') + sk;}sig = this.md5(sig);return sig;},/*** 得到終點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;},/*** 計算角度*/rad(d) {return d * Math.PI / 180.0;}, /*** 處理終點location數組* @return 返回終點數組*/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;},/*** 計算兩點間直線距離* @param a 表示緯度差* @param b 表示經度差* @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));},/*** 使用微信接口進行定位*/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 {String} feature 功能名稱* search 地點搜索* suggest關鍵詞提示* reverseGeocoder逆地址解析* geocoder地址解析* getCityList獲取城市列表：父集* getDistrictByCityId獲取區縣列表：子集* calculateDistance距離計算* @param {Object} param 接口參數* @param {Object} data 數據*/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) {//判斷是否返回周邊poivar 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 if (feature == 'direction') {var direction = data.result.routes;param.success(data,direction);} else {param.success(data);}},/*** 構造微信請求參數，公共屬性處理* * @param {Object} param 接口參數* @param {Object} param 配置項* @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;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;},/*** 處理用戶參數是否傳入坐標進行不同的處理*/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值不能為空');}vm = options.vmthis.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 region = null;var rectangle = null;//判斷城市限定參數if (options.region) {region = options.region;}//矩形限定坐標(暫時只支持字符串格式)if (options.rectangle) {rectangle = options.rectangle;}var locationsuccess = function (result) { if (region && !rectangle) {//城市限定參數拼接requestParam.boundary = "region(" + region + "," + auto_extend + "," + result.latitude + "," + result.longitude + ")";if (options.sig) {requestParam.sig = Utils.getSig(requestParam, options.sig, 'search');}} else if (rectangle && !region) {//矩形搜索requestParam.boundary = "rectangle(" + rectangle + ")";if (options.sig) {requestParam.sig = Utils.getSig(requestParam, options.sig, 'search');}} else {requestParam.boundary = "nearby(" + result.latitude + "," + result.longitude + "," + distance + "," + auto_extend + ")";if (options.sig) {requestParam.sig = Utils.getSig(requestParam, options.sig, 'search');}} wx.request(Utils.buildWxRequestConfig(options, {url: URL_SEARCH,data: requestParam}, 'search'));};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,page_size: options.page_size || 10,//控制顯示條數page_index: options.page_index || 1,//控制頁數get_subpois : options.get_subpois || 0,//返回子地點output: 'json',key: that.key};//長地址if (options.address_format) {requestParam.address_format = options.address_format;}//過濾if (options.filter) {requestParam.filter = options.filter;}//排序if (options.location) {var locationsuccess = function (result) {requestParam.location = result.latitude + ',' + result.longitude;if (options.sig) {requestParam.sig = Utils.getSig(requestParam, options.sig, 'suggest');}wx.request(Utils.buildWxRequestConfig(options, {url: URL_SUGGESTION,data: requestParam}, "suggest")); };Utils.locationProcess(options, locationsuccess);} else {if (options.sig) {requestParam.sig = Utils.getSig(requestParam, options.sig, 'suggest');}wx.request(Utils.buildWxRequestConfig(options, {url: URL_SUGGESTION,data: requestParam}, "suggest")); } };/*** 逆地址解析** @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;if (options.sig) {requestParam.sig = Utils.getSig(requestParam, options.sig, 'reverseGeocoder');}wx.request(Utils.buildWxRequestConfig(options, {url: URL_GET_GEOCODER,data: requestParam}, 'reverseGeocoder'));};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};//城市限定if (options.region) {requestParam.region = options.region;}if (options.sig) {requestParam.sig = Utils.getSig(requestParam, options.sig, 'geocoder');}wx.request(Utils.buildWxRequestConfig(options, {url: URL_GET_GEOCODER,data: requestParam},'geocoder'));};/*** 獲取城市列表** @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};if (options.sig) {requestParam.sig = Utils.getSig(requestParam, options.sig, 'getCityList');}wx.request(Utils.buildWxRequestConfig(options, {url: URL_CITY_LIST,data: requestParam},'getCityList'));};/*** 獲取對應城市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};if (options.sig) {requestParam.sig = Utils.getSig(requestParam, options.sig, 'getDistrictByCityId');}wx.request(Utils.buildWxRequestConfig(options, {url: URL_AREA_LIST,data: requestParam},'getDistrictByCityId'));};/*** 用于單起點到多終點的路線距離(非直線距離)計算：* 支持兩種距離計算方式：步行和駕車。* 起點到終點最大限制直線距離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};if (options.from) {options.location = options.from;}//計算直線距離if(requestParam.mode == 'straight'){ var locationsuccess = function (result) {var locationTo = Utils.getEndLocation(requestParam.to);//處理終點坐標var data = {message:"query ok",result:{elements:[]},status:0};for (var i = 0; i < locationTo.length; i++) {data.result.elements.push({//將坐標存入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;if (options.sig) {requestParam.sig = Utils.getSig(requestParam, options.sig, 'calculateDistance');}wx.request(Utils.buildWxRequestConfig(options, {url: URL_DISTANCE,data: requestParam},'calculateDistance'));};Utils.locationProcess(options, locationsuccess);} };/*** 路線規劃：* * @param {Object} options 接口參數對象* * 請求參數結構可以參考* https://lbs.qq.com/webservice_v1/guide-road.html*/direction(options) {var that = this;options = options || {};Utils.polyfillParam(options);if (Utils.checkParamKeyEmpty(options, 'to')) {return;}var requestParam = {output: 'json',key: that.key};//to格式處理if (typeof options.to == 'string') {requestParam.to = options.to;} else {requestParam.to = options.to.latitude + ',' + options.to.longitude;}//初始化局部請求域名var SET_URL_DIRECTION = null;//設置默認mode屬性options.mode = options.mode || MODE.driving;//設置請求域名SET_URL_DIRECTION = URL_DIRECTION + options.mode;if (options.from) {options.location = options.from;}if (options.mode == MODE.driving) {if (options.from_poi) {requestParam.from_poi = options.from_poi;}if (options.heading) {requestParam.heading = options.heading;}if (options.speed) {requestParam.speed = options.speed;}if (options.accuracy) {requestParam.accuracy = options.accuracy;}if (options.road_type) {requestParam.road_type = options.road_type;}if (options.to_poi) {requestParam.to_poi = options.to_poi;}if (options.from_track) {requestParam.from_track = options.from_track;}if (options.waypoints) {requestParam.waypoints = options.waypoints;}if (options.policy) {requestParam.policy = options.policy;}if (options.plate_number) {requestParam.plate_number = options.plate_number;}}if (options.mode == MODE.transit) {if (options.departure_time) {requestParam.departure_time = options.departure_time;}if (options.policy) {requestParam.policy = options.policy;}} var locationsuccess = function (result) {requestParam.from = result.latitude + ',' + result.longitude;if (options.sig) {requestParam.sig = Utils.getSig(requestParam, options.sig, 'direction',options.mode);}wx.request(Utils.buildWxRequestConfig(options, {url: SET_URL_DIRECTION,data: requestParam}, 'direction'));};Utils.locationProcess(options, locationsuccess);} };module.exports = QQMapWX;

map.vue

<template><view class="map-box"><map id="maps" class="tui-maps" :longitude="longitude" :latitude="latitude" :scale="16" show-location@regionchange="regionchange" :style="{'width':windowWidth+'px','height':'300px'}"><cover-image class="cover-image" src="./location.png" /><cover-view class="tip">您可以拖動地圖，標記當前精準位置</cover-view></map><view class="gps-body" v-if="poiss.length > 0"><scroll-view scroll-y="true" :scroll-top="scrollTop" scroll-with-animation="true"style="height:720rpx;"><block v-for="(item,index) in poiss" :key="item.id"><view class="gps-lists"><text class="gps-title">{{item.title}}</text><view class="gps-flex"><view class="gps-view">{{item.address}}</view><view style="margin-top:-18rpx;"><radio-group @change="radioChange(item,index)"><radio :checked="index === current" /></radio-group></view></view></view></block></scroll-view><view class="but"><button type="primary"@click="handleConfirm">確認位置</button></view></view></view> </template><script>const QQMapWX = require('./qqmap-wx-jssdk.min.js')const qqmapsdk = new QQMapWX({key: '申請的key'})export default {data() {return {longitude: null,latitude: null,windowWidth: 0,poiss: [],scrollTop: 0,current: 0,address:{},mapContext: null,}},//第一次初始化用戶位置信息onLoad() {try {var th_is = this;th_is.mapContext = uni.createMapContext('maps')const res = uni.getSystemInfoSync();th_is.windowWidth = res.windowWidth;uni.showLoading({title: '正在獲取定位中',});uni.getLocation({type: 'gcj02',isHighAccuracy: 'true',geocode:'true',success: (res) => {th_is.longitude = res.longitude;th_is.latitude = res.latitude;uni.hideLoading();th_is.getAddress(th_is.latitude, th_is.longitude);}})} catch (e) {// error}},methods: {//每移動一次獲取周圍地址regionchange(e) {var th_is = this;if (e.type == "end") {th_is.longitude = e.detail.centerLocation.longitude;th_is.latitude = e.detail.centerLocation.latitude;th_is.getAddress(th_is.latitude, th_is.longitude);} },//獲取附近位置信息getAddress(longitude, latitude) {let location = [longitude, latitude]let StringLocation = location.toString();var th_is = this;qqmapsdk.reverseGeocoder({location: StringLocation,get_poi: 1,poi_options: 'policy=1;page_size=20;page_index=1',success: res => {th_is.poiss = res.result.pois;th_is.address=res.result.pois.length>0?res.result.pois[0]:{}},fail: err => {uni.showToast({title: err.message,icon: 'none',duration: 3000})}})},radioChange(item, evt) {this.current = evt;this.mapContext.moveToLocation({latitude: item.location.lat,longitude: item.location.lng})this.address = Object.assign(item);// console.log(item);},//確認位置handleConfirm(){uni.$emit('onAddressChange', this.address)setTimeout(function() {uni.navigateBack({delta: 1});}, 500)}}} </script><style scoped lang="scss">.map-box{padding-bottom: constant(safe-area-inset-bottom); // 底部安全區padding-bottom: env(safe-area-inset-bottom); // 底部安全區box-sizing: content-box;}.tui-maps{width: 100%;height: 600rpx;// position: relative;}.cover-image {width: 62rpx;height: 62rpx;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}.tip {font-size: 20rpx;color: #b6b6b6;line-height: 42rpx;padding: 0 20rpx;position: absolute;left: 50%;bottom: 30rpx;box-shadow: 0px 1px 10px 1px rgba(153, 153, 153, 0.34);background-color: #fff;border-radius: 4px;transform: translateX(-50%);}.gps-body {width: 100%;padding-top: 20rpx;// padding-bottom: 32rpx;// box-sizing: border-box;background-color: #FFFFFF;// position: absolute;// top: 600rpx;// bottom: 0;font-size: 26rpx;.gps-lists {width: 98%;height: 100rpx;margin: 0px auto;border: 1px solid #f9f9f9;.gps-flex {display: flex;justify-content: space-between;}.gps-flex /deep/ .uni-radio-input {width: 40rpx;height: 40rpx;}.gps-title {padding-left: 10rpx;display: block;padding-top: 15rpx;}.gps-view {width: 70%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding-left: 10rpx;color: #b6b6b6;font-size: 25rpx;margin-top: 15rpx;}}}.but{margin-top: 32rpx;padding: 0 32rpx;} </style>

總結

以上是生活随笔為你收集整理的uniapp H5 实现地图选址功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。