uni-app 小程序使用腾讯地图完成搜索功能

前言

• 使用uni-app开发小程序时候使用腾讯地图原生SDK是，要把原生写法转成Vue写法在这记录一下。

• 我们需要注意的是使用高德地图时我们不仅要引入SDK，还要再uni-app中配置允许使用。

• 由于uni-app内置地图就是腾讯，所以获取位置的api，uni.getLocation坐标不用转换，直接使用。

• 高德地图原生sdk搜索，我用地点搜索，渲染结果。达到联想值效果，点击跳转。

效果图

20230330_213909

注意点

高德地图原生SDK：微信小程序JavaScript SDK | 腾讯位置服务

高德地图原生SDK，地点搜索，和关键词输入提示。

他们2个搜索结果差不多都是默认10条，只不过关键词输入提示回来的结果是有地址的，但是我是一进到页面授权之后使用uni-app uni.getLocation（）获取坐标。因为内置就是腾讯，所以可以直接传值使用。因为地点搜索的区域是坐标，不设置就是地图默认的坐标。这样一来我就可以不设置使用uni-app自带定位传值更合理，把它结果渲染成联想值，点击跳转。关键词输入提示，默认搜索区域是全国，设置只能是中文字，这样的话我们就要使用uni.getLocation（）获取完地址之后，使用逆地址解析获取城市，这样代码会多很多，api也调用多次，不合理，所以我使用地点搜索。下面有图

使用uni-app时，我们要允许使用小程序插件，不然可能会报错

uni-app官网

1在uni-app/manifest.JSON/微信小程序/勾选位置接口填写使用说明

2或者在uni-app/manifest.json/源码视图，直接写代码

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

从用户角度而言，我们应该弹出个授权框比较合理和好看uni.authorize（）可取uni-app官网搜索查看-下面有完整代码

查看高德地图原生SDK使用文档

2步主页文章有-申请腾讯地图key

随便下载一个，我是在uni-app下建立utils/qqmap-wx-jssdk.js放在这里-可直接复制

/

** * 微信小程序javascriptSDK *  * @version 1.1 * @date 2019-01-20 */​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 EARTH_RADIUS = 6378136.49;var Utils = {        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;    },          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;    },​        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        });    },​        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 () { };    },​        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;    },​        checkKeyword(param){        return !this.checkParamKeyEmpty(param, 'keyWord');    },​        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;    },​        buildErrorConfig(errCode, errMsg) {        return {            status: errCode,            message: errMsg        };    },​        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);      }    },​        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;    },​        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 {​        constructor(options) {        if (!options.key) {            throw Error('key值不能为空');        }        this.key = options.key;    };​        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 + ")";          } 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);    };​        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;            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"));              }     };​        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);    };​        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'));    };​​        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'));    };​        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'));    };​        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;            wx.request(Utils.buildWxRequestConfig(options, {              url: URL_DISTANCE,              data: requestParam            },'calculateDistance'));          };​          Utils.locationProcess(options, locationsuccess);        }          }};​module.exports = QQMapWX;

去自己小程序后台配置，要不然请求不到，在开发管理-开发设置-服务器域名配置

Https://apis.map.qq.com

我把原生小程序语法转成vue语法代码如下

注意：直接复制会报错，记得在uni-app中配置允许（上面有），记得引入SDK，我还有定位图片记得替换。

​​

总结：

经过这一趟流程下来相信你也对 uni-app 小程序使用腾讯地图完成搜索功能 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

什么不足的地方请大家指出谢谢 -- 風过无痕

来源地址：https://blog.csdn.net/weixin_53579656/article/details/129868678