官网地址
https://uniapp.dcloud.io/component/map
https://uniapp.dcloud.io/api/location/location

地图插件配置
https://ask.dcloud.net.cn/article/29

plus内置地图
https://www.html5plus.org/doc/zh_cn/maps.html

#腾讯地图

image.png

勾选配置项后点击保存生成对应的密钥。

#腾讯地图sdk导入项目

  1. var ERROR_CONF = {
  2.     KEY_ERR: 311,
  3.     KEY_ERR_MSG: 'key格式错误',
  4.     PARAM_ERR: 310,
  5.     PARAM_ERR_MSG: '请求参数信息有误',
  6.     SYSTEM_ERR: 600,
  7.     SYSTEM_ERR_MSG: '系统错误',
  8.     WX_ERR_CODE: 1000,
  9.     WX_OK_CODE: 200
  10. };
  11. var BASE_URL = 'https://apis.map.qq.com/ws/';
  12. var URL_SEARCH = BASE_URL + 'place/v1/search';
  13. var URL_SUGGESTION = BASE_URL + 'place/v1/suggestion';
  14. var URL_GET_GEOCODER = BASE_URL + 'geocoder/v1/';
  15. var URL_CITY_LIST = BASE_URL + 'district/v1/list';
  16. var URL_AREA_LIST = BASE_URL + 'district/v1/getchildren';
  17. var URL_DISTANCE = BASE_URL + 'distance/v1/';
  18. var EARTH_RADIUS = 6378136.49;
  19. var Utils = {
  20.     location2query(data) {
  21.         if (typeof data == 'string') {
  22.             return data
  23.         }
  24.         var query = '';
  25.         for (var i = 0; i < data.length; i++) {
  26.             var d = data[i];
  27.             if (!!query) {
  28.                 query += ';'
  29.             }
  30.             if (d.location) {
  31.                 query = query + d.location.lat + ',' + d.location.lng
  32.             }
  33.             if (d.latitude && d.longitude) {
  34.                 query = query + d.latitude + ',' + d.longitude
  35.             }
  36.         }
  37.         return query
  38.     },
  39.     rad(d) {
  40.         return d * Math.PI / 180.0
  41.     },
  42.     getEndLocation(location) {
  43.         var to = location.split(';');
  44.         var endLocation = [];
  45.         for (var i = 0; i < to.length; i++) {
  46.             endLocation.push({
  47.                 lat: parseFloat(to[i].split(',')[0]),
  48.                 lng: parseFloat(to[i].split(',')[1])
  49.             })
  50.         }
  51.         return endLocation
  52.     },
  53.     getDistance(latFrom, lngFrom, latTo, lngTo) {
  54.         var radLatFrom = this.rad(latFrom);
  55.         var radLatTo = this.rad(latTo);
  56.         var a = radLatFrom - radLatTo;
  57.         var b = this.rad(lngFrom) - this.rad(lngTo);
  58.         var distance = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLatFrom) * Math.cos(radLatTo) *
  59.             Math.pow(Math.sin(b / 2), 2)));
  60.         distance = distance * EARTH_RADIUS;
  61.         distance = Math.round(distance * 10000) / 10000;
  62.         return parseFloat(distance.toFixed(0))
  63.     },
  64.     getWXLocation(success, fail, complete) {
  65.         wx.getLocation({
  66.             type: 'gcj02',
  67.             success: success,
  68.             fail: fail,
  69.             complete: complete
  70.         })
  71.     },
  72.     getLocationParam(location) {
  73.         if (typeof location == 'string') {
  74.             var locationArr = location.split(',');
  75.             if (locationArr.length === 2) {
  76.                 location = {
  77.                     latitude: location.split(',')[0],
  78.                     longitude: location.split(',')[1]
  79.                 }
  80.             } else {
  81.                 location = {}
  82.             }
  83.         }
  84.         return location
  85.     },
  86.     polyfillParam(param) {
  87.         param.success = param.success || function() {};
  88.         param.fail = param.fail || function() {};
  89.         param.complete = param.complete || function() {}
  90.     },
  91.     checkParamKeyEmpty(param, key) {
  92.         if (!param[key]) {
  93.             var errconf = this.buildErrorConfig(ERROR_CONF.PARAM_ERR, ERROR_CONF.PARAM_ERR_MSG + key + '参数格式有误');
  94.             param.fail(errconf);
  95.             param.complete(errconf);
  96.             return true
  97.         }
  98.         return false
  99.     },
  100.     checkKeyword(param) {
  101.         return !this.checkParamKeyEmpty(param, 'keyword')
  102.     },
  103.     checkLocation(param) {
  104.         var location = this.getLocationParam(param.location);
  105.         if (!location || !location.latitude || !location.longitude) {
  106.             var errconf = this.buildErrorConfig(ERROR_CONF.PARAM_ERR, ERROR_CONF.PARAM_ERR_MSG + ' location参数格式有误');
  107.             param.fail(errconf);
  108.             param.complete(errconf);
  109.             return false
  110.         }
  111.         return true
  112.     },
  113.     buildErrorConfig(errCode, errMsg) {
  114.         return {
  115.             status: errCode,
  116.             message: errMsg
  117.         }
  118.     },
  119.     handleData(param, data, feature) {
  120.         if (feature === 'search') {
  121.             var searchResult = data.data;
  122.             var searchSimplify = [];
  123.             for (var i = 0; i < searchResult.length; i++) {
  124.                 searchSimplify.push({
  125.                     id: searchResult[i].id || null,
  126.                     title: searchResult[i].title || null,
  127.                     latitude: searchResult[i].location && searchResult[i].location.lat || null,
  128.                     longitude: searchResult[i].location && searchResult[i].location.lng || null,
  129.                     address: searchResult[i].address || null,
  130.                     category: searchResult[i].category || null,
  131.                     tel: searchResult[i].tel || null,
  132.                     adcode: searchResult[i].ad_info && searchResult[i].ad_info.adcode || null,
  133.                     city: searchResult[i].ad_info && searchResult[i].ad_info.city || null,
  134.                     district: searchResult[i].ad_info && searchResult[i].ad_info.district || null,
  135.                     province: searchResult[i].ad_info && searchResult[i].ad_info.province || null
  136.                 })
  137.             }
  138.             param.success(data, {
  139.                 searchResult: searchResult,
  140.                 searchSimplify: searchSimplify
  141.             })
  142.         } else if (feature === 'suggest') {
  143.             var suggestResult = data.data;
  144.             var suggestSimplify = [];
  145.             for (var i = 0; i < suggestResult.length; i++) {
  146.                 suggestSimplify.push({
  147.                     adcode: suggestResult[i].adcode || null,
  148.                     address: suggestResult[i].address || null,
  149.                     category: suggestResult[i].category || null,
  150.                     city: suggestResult[i].city || null,
  151.                     district: suggestResult[i].district || null,
  152.                     id: suggestResult[i].id || null,
  153.                     latitude: suggestResult[i].location && suggestResult[i].location.lat || null,
  154.                     longitude: suggestResult[i].location && suggestResult[i].location.lng || null,
  155.                     province: suggestResult[i].province || null,
  156.                     title: suggestResult[i].title || null,
  157.                     type: suggestResult[i].type || null
  158.                 })
  159.             }
  160.             param.success(data, {
  161.                 suggestResult: suggestResult,
  162.                 suggestSimplify: suggestSimplify
  163.             })
  164.         } else if (feature === 'reverseGeocoder') {
  165.             var reverseGeocoderResult = data.result;
  166.             var reverseGeocoderSimplify = {
  167.                 address: reverseGeocoderResult.address || null,
  168.                 latitude: reverseGeocoderResult.location && reverseGeocoderResult.location.lat || null,
  169.                 longitude: reverseGeocoderResult.location && reverseGeocoderResult.location.lng || null,
  170.                 adcode: reverseGeocoderResult.ad_info && reverseGeocoderResult.ad_info.adcode || null,
  171.                 city: reverseGeocoderResult.address_component && reverseGeocoderResult.address_component.city || null,
  172.                 district: reverseGeocoderResult.address_component && reverseGeocoderResult.address_component.district || null,
  173.                 nation: reverseGeocoderResult.address_component && reverseGeocoderResult.address_component.nation || null,
  174.                 province: reverseGeocoderResult.address_component && reverseGeocoderResult.address_component.province || null,
  175.                 street: reverseGeocoderResult.address_component && reverseGeocoderResult.address_component.street || null,
  176.                 street_number: reverseGeocoderResult.address_component && reverseGeocoderResult.address_component.street_number ||
  177.                     null,
  178.                 recommend: reverseGeocoderResult.formatted_addresses && reverseGeocoderResult.formatted_addresses.recommend ||
  179.                     null,
  180.                 rough: reverseGeocoderResult.formatted_addresses && reverseGeocoderResult.formatted_addresses.rough || null
  181.             };
  182.             if (reverseGeocoderResult.pois) {
  183.                 var pois = reverseGeocoderResult.pois;
  184.                 var poisSimplify = [];
  185.                 for (var i = 0; i < pois.length; i++) {
  186.                     poisSimplify.push({
  187.                         id: pois[i].id || null,
  188.                         title: pois[i].title || null,
  189.                         latitude: pois[i].location && pois[i].location.lat || null,
  190.                         longitude: pois[i].location && pois[i].location.lng || null,
  191.                         address: pois[i].address || null,
  192.                         category: pois[i].category || null,
  193.                         adcode: pois[i].ad_info && pois[i].ad_info.adcode || null,
  194.                         city: pois[i].ad_info && pois[i].ad_info.city || null,
  195.                         district: pois[i].ad_info && pois[i].ad_info.district || null,
  196.                         province: pois[i].ad_info && pois[i].ad_info.province || null
  197.                     })
  198.                 }
  199.                 param.success(data, {
  200.                     reverseGeocoderResult: reverseGeocoderResult,
  201.                     reverseGeocoderSimplify: reverseGeocoderSimplify,
  202.                     pois: pois,
  203.                     poisSimplify: poisSimplify
  204.                 })
  205.             } else {
  206.                 param.success(data, {
  207.                     reverseGeocoderResult: reverseGeocoderResult,
  208.                     reverseGeocoderSimplify: reverseGeocoderSimplify
  209.                 })
  210.             }
  211.         } else if (feature === 'geocoder') {
  212.             var geocoderResult = data.result;
  213.             var geocoderSimplify = {
  214.                 title: geocoderResult.title || null,
  215.                 latitude: geocoderResult.location && geocoderResult.location.lat || null,
  216.                 longitude: geocoderResult.location && geocoderResult.location.lng || null,
  217.                 adcode: geocoderResult.ad_info && geocoderResult.ad_info.adcode || null,
  218.                 province: geocoderResult.address_components && geocoderResult.address_components.province || null,
  219.                 city: geocoderResult.address_components && geocoderResult.address_components.city || null,
  220.                 district: geocoderResult.address_components && geocoderResult.address_components.district || null,
  221.                 street: geocoderResult.address_components && geocoderResult.address_components.street || null,
  222.                 street_number: geocoderResult.address_components && geocoderResult.address_components.street_number || null,
  223.                 level: geocoderResult.level || null
  224.             }
  225.             param.success(data, {
  226.                 geocoderResult: geocoderResult,
  227.                 geocoderSimplify: geocoderSimplify
  228.             })
  229.         } else if (feature === 'getCityList') {
  230.             var provinceResult = data.result[0];
  231.             var cityResult = data.result[1];
  232.             var districtResult = data.result[2];
  233.             param.success(data, {
  234.                 provinceResult: provinceResult,
  235.                 cityResult: cityResult,
  236.                 districtResult: districtResult
  237.             })
  238.         } else if (feature === 'getDistrictByCityId') {
  239.             var districtByCity = data.result[0];
  240.             param.success(data, districtByCity)
  241.         } else if (feature === 'calculateDistance') {
  242.             var calculateDistanceResult = data.result.elements;
  243.             var distance = [];
  244.             for (var i = 0; i < calculateDistanceResult.length; i++) {
  245.                 distance.push(calculateDistanceResult[i].distance)
  246.             }
  247.             param.success(data, {
  248.                 calculateDistanceResult: calculateDistanceResult,
  249.                 distance: distance
  250.             })
  251.         } else {
  252.             param.success(data)
  253.         }
  254.     },
  255.     buildWxRequestConfig(param, options, feature) {
  256.         var that = this;
  257.         options.header = {
  258.             "content-type": "application/json"
  259.         };
  260.         options.method = 'GET';
  261.         options.success = function(res) {
  262.             var data = res.data;
  263.             if (data.status === 0) {
  264.                 that.handleData(param, data, feature)
  265.             } else {
  266.                 param.fail(data)
  267.             }
  268.         };
  269.         options.fail = function(res) {
  270.             res.statusCode = ERROR_CONF.WX_ERR_CODE;
  271.             param.fail(that.buildErrorConfig(ERROR_CONF.WX_ERR_CODE, res.errMsg))
  272.         };
  273.         options.complete = function(res) {
  274.             var statusCode = +res.statusCode;
  275.             switch (statusCode) {
  276.                 case ERROR_CONF.WX_ERR_CODE:
  277.                     {
  278.                         param.complete(that.buildErrorConfig(ERROR_CONF.WX_ERR_CODE, res.errMsg));
  279.                         break
  280.                     }
  281.                 case ERROR_CONF.WX_OK_CODE:
  282.                     {
  283.                         var data = res.data;
  284.                         if (data.status === 0) {
  285.                             param.complete(data)
  286.                         } else {
  287.                             param.complete(that.buildErrorConfig(data.status, data.message))
  288.                         }
  289.                         break
  290.                     }
  291.                 default:
  292.                     {
  293.                         param.complete(that.buildErrorConfig(ERROR_CONF.SYSTEM_ERR, ERROR_CONF.SYSTEM_ERR_MSG))
  294.                     }
  295.             }
  296.         }
  297.         return options
  298.     },
  299.     locationProcess(param, locationsuccess, locationfail, locationcomplete) {
  300.         var that = this;
  301.         locationfail = locationfail || function(res) {
  302.             res.statusCode = ERROR_CONF.WX_ERR_CODE;
  303.             param.fail(that.buildErrorConfig(ERROR_CONF.WX_ERR_CODE, res.errMsg))
  304.         };
  305.         locationcomplete = locationcomplete || function(res) {
  306.             if (res.statusCode == ERROR_CONF.WX_ERR_CODE) {
  307.                 param.complete(that.buildErrorConfig(ERROR_CONF.WX_ERR_CODE, res.errMsg))
  308.             }
  309.         };
  310.         if (!param.location) {
  311.             that.getWXLocation(locationsuccess, locationfail, locationcomplete)
  312.         } else if (that.checkLocation(param)) {
  313.             var location = Utils.getLocationParam(param.location);
  314.             locationsuccess(location)
  315.         }
  316.     }
  317. };
  318. class QQMapWX {
  319.     constructor(options) {
  320.         if (!options.key) {
  321.             throw Error('key值不能为空')
  322.         }
  323.         this.key = options.key
  324.     };
  325.     search(options) {
  326.         var that = this;
  327.         options = options || {};
  328.         Utils.polyfillParam(options);
  329.         if (!Utils.checkKeyword(options)) {
  330.             return
  331.         }
  332.         var requestParam = {
  333.             keyword: options.keyword,
  334.             orderby: options.orderby || '_distance',
  335.             page_size: options.page_size || 10,
  336.             page_index: options.page_index || 1,
  337.             output: 'json',
  338.             key: that.key
  339.         };
  340.         if (options.address_format) {
  341.             requestParam.address_format = options.address_format
  342.         }
  343.         if (options.filter) {
  344.             requestParam.filter = options.filter
  345.         }
  346.         var distance = options.distance || "1000";
  347.         var auto_extend = options.auto_extend || 1;
  348.         var region = null;
  349.         var rectangle = null;
  350.         if (options.region) {
  351.             region = options.region
  352.         }
  353.         if (options.rectangle) {
  354.             rectangle = options.rectangle
  355.         }
  356.         var locationsuccess = function(result) {
  357.             if (region && !rectangle) {
  358.                 requestParam.boundary = "region(" + region + "," + auto_extend + "," + result.latitude + "," + result.longitude +
  359.                     ")"
  360.             } else if (rectangle && !region) {
  361.                 requestParam.boundary = "rectangle(" + rectangle + ")"
  362.             } else {
  363.                 requestParam.boundary = "nearby(" + result.latitude + "," + result.longitude + "," + distance + "," + auto_extend +
  364.                     ")"
  365.             }
  366.             wx.request(Utils.buildWxRequestConfig(options, {
  367.                 url: URL_SEARCH,
  368.                 data: requestParam
  369.             }, 'search'))
  370.         };
  371.         Utils.locationProcess(options, locationsuccess)
  372.     };
  373.     getSuggestion(options) {
  374.         var that = this;
  375.         options = options || {};
  376.         Utils.polyfillParam(options);
  377.         if (!Utils.checkKeyword(options)) {
  378.             return
  379.         }
  380.         var requestParam = {
  381.             keyword: options.keyword,
  382.             region: options.region || '全国',
  383.             region_fix: options.region_fix || 0,
  384.             policy: options.policy || 0,
  385.             page_size: options.page_size || 10,
  386.             page_index: options.page_index || 1,
  387.             get_subpois: options.get_subpois || 0,
  388.             output: 'json',
  389.             key: that.key
  390.         };
  391.         if (options.address_format) {
  392.             requestParam.address_format = options.address_format
  393.         }
  394.         if (options.filter) {
  395.             requestParam.filter = options.filter
  396.         }
  397.         if (options.location) {
  398.             var locationsuccess = function(result) {
  399.                 requestParam.location = result.latitude + ',' + result.longitude;
  400.                 wx.request(Utils.buildWxRequestConfig(options, {
  401.                     url: URL_SUGGESTION,
  402.                     data: requestParam
  403.                 }, "suggest"))
  404.             };
  405.             Utils.locationProcess(options, locationsuccess)
  406.         } else {
  407.             wx.request(Utils.buildWxRequestConfig(options, {
  408.                 url: URL_SUGGESTION,
  409.                 data: requestParam
  410.             }, "suggest"))
  411.         }
  412.     };
  413.     reverseGeocoder(options) {
  414.         var that = this;
  415.         options = options || {};
  416.         Utils.polyfillParam(options);
  417.         var requestParam = {
  418.             coord_type: options.coord_type || 5,
  419.             get_poi: options.get_poi || 0,
  420.             output: 'json',
  421.             key: that.key
  422.         };
  423.         if (options.poi_options) {
  424.             requestParam.poi_options = options.poi_options
  425.         }
  426.         var locationsuccess = function(result) {
  427.             requestParam.location = result.latitude + ',' + result.longitude;
  428.             wx.request(Utils.buildWxRequestConfig(options, {
  429.                 url: URL_GET_GEOCODER,
  430.                 data: requestParam
  431.             }, 'reverseGeocoder'))
  432.         };
  433.         Utils.locationProcess(options, locationsuccess)
  434.     };
  435.     geocoder(options) {
  436.         var that = this;
  437.         options = options || {};
  438.         Utils.polyfillParam(options);
  439.         if (Utils.checkParamKeyEmpty(options, 'address')) {
  440.             return
  441.         }
  442.         var requestParam = {
  443.             address: options.address,
  444.             output: 'json',
  445.             key: that.key
  446.         };
  447.         if (options.region) {
  448.             requestParam.region = options.region
  449.         }
  450.         wx.request(Utils.buildWxRequestConfig(options, {
  451.             url: URL_GET_GEOCODER,
  452.             data: requestParam
  453.         }, 'geocoder'))
  454.     };
  455.     getCityList(options) {
  456.         var that = this;
  457.         options = options || {};
  458.         Utils.polyfillParam(options);
  459.         var requestParam = {
  460.             output: 'json',
  461.             key: that.key
  462.         };
  463.         wx.request(Utils.buildWxRequestConfig(options, {
  464.             url: URL_CITY_LIST,
  465.             data: requestParam
  466.         }, 'getCityList'))
  467.     };
  468.     getDistrictByCityId(options) {
  469.         var that = this;
  470.         options = options || {};
  471.         Utils.polyfillParam(options);
  472.         if (Utils.checkParamKeyEmpty(options, 'id')) {
  473.             return
  474.         }
  475.         var requestParam = {
  476.             id: options.id || '',
  477.             output: 'json',
  478.             key: that.key
  479.         };
  480.         wx.request(Utils.buildWxRequestConfig(options, {
  481.             url: URL_AREA_LIST,
  482.             data: requestParam
  483.         }, 'getDistrictByCityId'))
  484.     };
  485.     calculateDistance(options) {
  486.         var that = this;
  487.         options = options || {};
  488.         Utils.polyfillParam(options);
  489.         if (Utils.checkParamKeyEmpty(options, 'to')) {
  490.             return
  491.         }
  492.         var requestParam = {
  493.             mode: options.mode || 'walking',
  494.             to: Utils.location2query(options.to),
  495.             output: 'json',
  496.             key: that.key
  497.         };
  498.         if (options.from) {
  499.             options.location = options.from
  500.         }
  501.         if (requestParam.mode == 'straight') {
  502.             var locationsuccess = function(result) {
  503.                 var locationTo = Utils.getEndLocation(requestParam.to);
  504.                 var data = {
  505.                     message: "query ok",
  506.                     result: {
  507.                         elements: []
  508.                     },
  509.                     status: 0
  510.                 };
  511.                 for (var i = 0; i < locationTo.length; i++) {
  512.                     data.result.elements.push({
  513.                         distance: Utils.getDistance(result.latitude, result.longitude, locationTo[i].lat, locationTo[i].lng),
  514.                         duration: 0,
  515.                         from: {
  516.                             lat: result.latitude,
  517.                             lng: result.longitude
  518.                         },
  519.                         to: {
  520.                             lat: locationTo[i].lat,
  521.                             lng: locationTo[i].lng
  522.                         }
  523.                     })
  524.                 }
  525.                 var calculateResult = data.result.elements;
  526.                 var distanceResult = [];
  527.                 for (var i = 0; i < calculateResult.length; i++) {
  528.                     distanceResult.push(calculateResult[i].distance)
  529.                 }
  530.                 return options.success(data, {
  531.                     calculateResult: calculateResult,
  532.                     distanceResult: distanceResult
  533.                 })
  534.             };
  535.             Utils.locationProcess(options, locationsuccess)
  536.         } else {
  537.             var locationsuccess = function(result) {
  538.                 requestParam.from = result.latitude + ',' + result.longitude;
  539.                 wx.request(Utils.buildWxRequestConfig(options, {
  540.                     url: URL_DISTANCE,
  541.                     data: requestParam
  542.                 }, 'calculateDistance'))
  543.             };
  544.             Utils.locationProcess(options, locationsuccess)
  545.         }
  546.     }
  547. };
  548. module.exports = QQMapWX;

#引入项目

  1. const QQMapWX = require('@/common/js/qqmap-wx-jssdk.min.js');
  3. //这里的key值就是你申请的密钥
  4. this.qqmapsdk = new QQMapWX({
  5.   key: this.key
  6. });

#测试demo

  1. <template>
  2.     <view class="container">
  3.         <view class="header-box">
  4.             <view class="result-box">
  5.                 <view class="info list-item">
  6.                     <view class="badge"></view>
  7.                     <view class="ellipsis">{{address}}</view>
  8.                 </view>
  9.                 <view class="info">
  10.                     <view class="badge orange"></view>
  11.                     <view class="ellipsis"> {{current_long + "," + current_lat}}</view>
  12.                 </view>
  13.             </view>
  14.         </view>
  16.         <map 
  17.             id="maps"
  18.             :longitude="longitude"
  19.             :latitude="latitude"
  20.             :scale="16"
  21.             show-location
  22.             @regionchange="regionchange"
  23.             @moveToLocation="fnMoveToLocation"
  24.         >
  25.             <cover-image class="cover-image" src="../../static/images//location.png" />
  26.         </map>
  27.     </view>
  28. </template>
  30. <script>
  31.     const QQMapWX = require('@/common/js/qqmap-wx-jssdk.min.js');
  32.     export default {
  33.         data() {
  34.             return {
  35.                 address: "正在获取地址...",
  36.                 longitude: 120.1887611219618,
  37.                 latitude: 30.19322157118055,
  38.                 current_long: 120.1887611219618,
  39.                 current_lat: 30.19322157118055,
  40.                 key: 'WL7BZ-TBAW3-7CB3K-YFHND-YTAJ3-5OF4F',
  41.                 mapCtx: null,
  42.                 location: false,
  43.                 qqmapsdk: null,
  44.                 mapObj: null
  45.             }
  46.         },
  47.         onLoad() {
  48.             this.qqmapsdk = new QQMapWX({
  49.                 key: this.key
  50.             });
  51.             this.currentLocation()
  52.         },
  53.         onReady() {
  54.             // #ifdef APP-PLUS
  55.             if (!this.mapCtx) {
  56.                 this.mapCtx = uni.createMapContext("maps");
  57.             }
  58.             this.mapObj = this.mapCtx.$getAppMap();
  59.             this.mapObj.onstatuschanged = (e) => {
  60.                 // 地图发生变化的时候，获取中间点，也就是cover-image指定的位置
  61.                 if (this.longitude != 114.010857) {
  62.                     this.address = "正在获取地址...";
  63.                     this.mapCtx.getCenterLocation({
  64.                         type: 'gcj02',
  65.                         success: (res) => {
  66.                             this.current_long = res.latitude;
  67.                             this.current_lat = res.longitude;
  68.                             this.getAddress(res.longitude, res.latitude);
  69.                         }
  70.                     })
  71.                 }
  72.             }
  73.             //测试
  74.             // #endif
  75.         },
  76.         methods: {
  77.             // 地图发生变化的时候，获取中间点，也就是cover-image指定的位置
  78.             regionchange(e) {
  79.                 console.log(e,'1');
  80.                 if (e.type == 'end' && (e.causedBy == 'scale' || e.causedBy == 'drag')) {
  81.                     this.address = "正在获取地址...";
  82.                     if (!this.mapCtx) {
  83.                         this.mapCtx = uni.createMapContext("maps");
  84.                     }
  85.                     this.mapCtx.getCenterLocation({
  86.                         type: 'gcj02',
  87.                         success: (res) => {
  88.                             console.log(res)
  89.                             this.latitude = res.latitude;
  90.                             this.longitude = res.longitude;
  91.                             this.getAddress(res.longitude, res.latitude);
  92.                         }
  93.                     })
  94.                 }
  95.             },
  96.             //根据经纬度获取地址信息
  97.             getAddress: function(lng, lat) {
  98.                 this.qqmapsdk.reverseGeocoder({
  99.                     location: {
  100.                         latitude: lat,
  101.                         longitude: lng
  102.                     },
  103.                     success: (res) => {
  104.                         console.log(res)
  105.                         this.address = res.result.formatted_addresses.recommend
  106.                     },
  107.                     fail: (res) => {
  108.                         this.address = "获取位置信息失败"
  109.                     }
  110.                 })
  111.             },
  112.             //当前位置
  113.             currentLocation() {
  114.                 const that = this;
  115.                 uni.getLocation({
  116.                     type: 'gcj02',
  117.                     success(res) {
  118.                         console.log(res);
  119.                         that.latitude = res.latitude;
  120.                         that.longitude = res.longitude;
  121.                     }
  122.                 })
  123.             },
  124.             //将地图中心移动到当前定位点
  125.             fnMoveToLocation (e) {
  127.             }
  128.         }
  129.     }
  130. </script>
  132. <style>
  133.     /* pages/location/location.wxss */
  135.     page {
  136.         height: 100%;
  137.     }
  139.     .container {
  140.         width: 100%;
  141.         height: 100%;
  142.     }
  144.     #maps {
  145.         width: 100%;
  146.         height: 100%;
  147.     }
  149.     .cover-image {
  150.         height: 60upx;
  151.         width: 60upx;
  152.         position: fixed;
  153.         top: 50%;
  154.         left: 50%;
  155.         margin-top: -30upx;
  156.         margin-left: -30upx;
  157.     }
  159.     .header-box {
  160.         width: 100%;
  161.         padding-top: 8upx;
  162.         box-sizing: border-box;
  163.         border-radius: 24upx;
  164.     }
  166.     .result-box {
  167.         width: 100%;
  168.         padding: 12upx 30upx;
  169.         box-sizing: border-box;
  170.         color: #555;
  171.         font-size: 28upx;
  172.         display: flex;
  173.         flex-direction: column;
  174.         justify-content: space-between;
  175.         background: #fff;
  176.         border-radius: 24upx;
  177.     }
  179.     .list-item::after {
  180.         left: 0;
  181.     }
  183.     .badge {
  184.         height: 16upx;
  185.         width: 16upx;
  186.         border-radius: 8upx;
  187.         background: #5677fc;
  188.         margin-right: 20upx;
  189.         flex-shrink: 0;
  190.     }
  192.     .orange {
  193.         background: #ff7900 !important;
  194.     }
  196.     .info {
  197.         display: flex;
  198.         align-items: center;
  199.         padding: 20upx 0;
  200.     }
  202.     .ellipsis {
  203.         width: 100%;
  204.         overflow: hidden;
  205.         white-space: nowrap;
  206.         text-overflow: ellipsis;
  207.     }
  209.     .current-location {
  210.         position: fixed;
  211.         height: 76upx;
  212.         width: 76upx;
  213.         display: flex;
  214.         align-items: center;
  215.         justify-content: center;
  216.         bottom: 80upx;
  217.         right: 60upx;
  218.         background: rgba(255, 255, 255, 0.94);
  219.         border-radius: 38upx;
  220.     }
  222.     .current-img {
  223.         width: 42upx;
  224.         height: 42upx;
  225.     }
  226. </style>

#ios配置项

"ios" : {
  "urlschemewhitelist": [
    "qqmap"
  ]
}

#高德地图

#高德地图开放平台

https://lbs.amap.com/

#申请ios平台与android平台的appkey值

B1633E37-A714-403D-99CF-1BB3C7422DA1.png

#在应用中进行配置

22CD24A6-D358-43CA-80B1-FDE9298EB6DC.png

#应用权限配置

image.png

#sdk申请

https://lbs.amap.com/api/

…