uniapp H5 实现地图选址功能

这段时间因为项目中使用到地图选址，由于第一次在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 实现地图选址功能相关推荐

前端Vue项目如何集成百度地图实现地图选址功能
文章目录前言一.实现效果图二.准备工作 2.1.注册百度地图开发者账号 2.2.创建应用三.实现步骤 1. 引用百度地图API文件 2. 新增地图选址组件 3. 使用组件总结参考文章前言 ...
html百度地图app,uniapp H5 百度地图(示例代码)
uniapp跳转内部html 使用webview 1.首先在根目录创建hybrid 文件夹,创建html子文件夹 2.创建包含webview的vue文件,在pages.json内写入路径文件中包un ...
uniapp H5端使用高德地图完成路线规划
本项目是H5端,APP端地图的使用方法请参考我的另一篇博客uniapp,map地图组件打包原生APP 首先到高德地图API,申请web端key 参考高德H5端教程开始写代码高德地图JS API 1.准 ...
uniapp h5地图导航
uniapp h5地图导航 view部分 <label @click="daohang">导航</label> js部分 export default {d ...
vue使用高德地图搜索地址添加标记marker,定位，拖拽选址功能
目录 JSAPI 的加载使用 JSAPI Loader (推荐) 实现效果: 需求:点击输入框弹窗地图弹窗,输入框输入地址模糊搜索列表结果,点击列表添加相应得marker标记,并且添加标记拖拽选址功 ...
uniapp h5 引入高德地图
因地图收费.uniapp h5 是腾讯地图,公司为了少交一份钱,就改为引入高德地图我才用是模板引入js 首先在项目跟根目录添加index.html <!DOCTYPE html> < ...
android 嵌套h5百度地图实现打卡功能
简介项目过程中因需要做一个类似打卡的应用,先将之前写过的demo跟大家一起分享一下,主要是介绍如何使用android的webview嵌套H5实现简单的定位功能,H5页面设计html 以及javasc ...
uniapp - 超详细 H5 网站图片压缩功能，图像上传前进行压缩降低大小并上传到服务器完整示例源码（附带 uview 组件库 u-upload 上传组件与该图片压缩插件 “搭配组合“ 使用教程）
前言网上的文章代码非常乱,各种无注释及平台不通用的问题,根本无法改造为自己想要的效果. 本文站在小白的角度,从 0-1 详细描述了 uniapp H5 网页平台下,图片上传前 "压缩降低大 ...
微信小程序与H5内嵌网页交互实现地图定位功能
小程序中有很多好用的API,整个项目我们是用vue实现的,使用小程序的内嵌网页功能完成交互. 使用小程序的< web-view >标签将vue项目在小程序中运行.大概的背景就是这样.接下来 ...

uniapp H5 实现地图选址功能

uniapp H5 实现地图选址功能相关推荐

最新文章

热门文章