前提假设你已经申请好了 高德api及对应的高德api业务，申请高德api配置相关步骤不在这里敷述，自行百度相关博文配置；
build/webpack.base.conf.js要配置
const webpackConfig = {// .....externals: {'AMap': 'window.AMap'}}
移动端index.html需要预置map容器div
<body><div id="app"></div><!-- 地图容器 --><div id="mapAmap1" style="display: none"></div> <!--高德key--><script src="/maps?v=1.3&key=你的高德key"></script></body>
引用： import LocationAMap from '@/utils/positionLocation/positionLocation'
调用示例:
LocationAMap.getPosition(function(res_data) {if (res_data.status) {Toast({message: '获取当前位置成功！',duration: 1000})// that.driverParam.nowLocation = res_data.nowLocation // 具体返回的相关位置信息} else {Toast({message: '获取当前位置失败！',duration: 1000})}})
positionLocation.js
/*** CopyRight zh* /08/15* positionLocation.js* version : 1.0.0*/'use strict'import Vue from 'vue'import AMap from 'AMap'Vue.use(AMap)/*** 引用：* import LocationAMap from '@/utils/positionLocation/positionLocation'* 调用的示例：* nowPlaceClick: function() {const that = thisthat.loadingShow = true// 位置信息获取-当api请求失败或成功后，执行callback回调 => function(res_data){}LocationAMap.getPosition(function(res_data) {// console.log('getPosition-res_data', res_data)if (res_data.status) {that.loadingShow = falseToast({message: '获取当前位置成功！',duration: 1000})that.driverParam.nowLocation = res_data.nowLocation// that.startCityKeyword = res_data.nowLocation.city} else {that.loadingShow = falseToast({message: '获取当前位置失败！',duration: 1000})}})}*/const locationAMap = {/*** @type {Object,Boolean}*/locationData: { // 用于定位相关信息提交nowLocation: {lat: '', // 纬度lon: '', // 经度province: '', // 省city: '', // 市district: '', // 区 县nowPlace: '', // 省-市-区Address: '' // 详细地址},status: false // 用于回调函数判断 位置是否请求成功},/*** 调用高德api Geolocation()* @param callback* @callback locationData*/getPosition: function(callback) {const mapObj = new AMap.Map('mapAmap1') // index.html预置map容器divconst _thisSelf = thismapObj.plugin('AMap.Geolocation', function() {const geolocation = new AMap.Geolocation({timeout: 2000,GeoLocationFirst: true,maximumAge: 0 // 定位结果缓存0毫秒，默认：0})mapObj.addControl(geolocation) // 把定位插件加入地图实例geolocation.getCurrentPosition() // 调用定位AMap.event.addListener(geolocation, 'complete', onComplete) // 返回定位信息AMap.event.addListener(geolocation, 'error', onError) // 返回定位出错信息function onComplete(data) {// data是具体的定位信息const latitude = data.position.getLat() // 纬度const longitude = data.position.getLng() // 经度console.log('latitude', latitude, 'longitude', longitude)_thisSelf.newGetAddress(latitude, longitude, callback)}function onError(data) {_thisSelf.locationData.status = false // 代表获取位置信息失败callback(_thisSelf.locationData) // 回调函数}})},/*** 调用高德api Geocoder()* @param latitude 维度* @param longitude 经度* @param callback* @callback locationData*/newGetAddress: function(latitude, longitude, callback) {const _thisSelf = this_thisSelf.locationData.nowLocation.lat = latitude_thisSelf.locationData.nowLocation.lon = longitudeconst mapObj = new AMap.Map('mapAmap1')mapObj.plugin('AMap.Geocoder', function() {const geocoder = new AMap.Geocoder({city: '全国', // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycoderadius: 100 // 以已知坐标为中心点，radius为半径，返回范围内兴趣点和道路信息// extensions: 'all' // 返回地址描述以及附近兴趣点和道路信息，默认"base"})// 纬度29.5647100000,106.5507300000 重庆市；31.2303700000,121.4737000000 上海市const lnglat = [longitude, latitude] // 倒序反写经纬度// 天津120 北京110 上海310 重庆500 ,const reg1 = /^[1][1][0][0-9][0-9][0-9]/const reg2 = /^[1][2][0][0-9][0-9][0-9]/const reg3 = /^[5][0][0][0-9][0-9][0-9]/const reg4 = /^[3][1][0][0-9][0-9][0-9]/geocoder.getAddress(lnglat, function(status, result) {// console.log('getAddress', result)if (status === 'complete' && result.info === 'OK') {// result为对应的地理位置详细信息const adcode = result.regeocode.addressComponent.adcode // 省市编码if (reg1.test(adcode) || reg2.test(adcode) || reg3.test(adcode) || reg4.test(adcode)) {_thisSelf.locationData.nowLocation.city = result.regeocode.addressComponent.province} else {_thisSelf.locationData.nowLocation.city = result.regeocode.addressComponent.city}// 提取 省 市 区 详细地址信息 重拼装省-市-区信息_thisSelf.locationData.nowLocation.province = result.regeocode.addressComponent.province_thisSelf.locationData.nowLocation.district = result.regeocode.addressComponent.district_thisSelf.locationData.nowLocation.Address = result.regeocode.formattedAddress_thisSelf.locationData.nowLocation.nowPlace = result.regeocode.addressComponent.province + result.regeocode.addressComponent.city + result.regeocode.addressComponent.district_thisSelf.locationData.status = true // 代表获取位置信息成功callback(_thisSelf.locationData) // 回调函数} else {_thisSelf.locationData.status = false // 代表获取位置信息失败callback(_thisSelf.locationData) // 回调函数}})})}}export default locationAMap
另外相关使用报错：
插件plugin引用使用正常 报 USERKEY_PLAT_NOMATCH 错误
原因 申请的 高德服务 key不符合 当前服务范围，要看 申请的【绑定服务】key 有没有对应的功能使用范围，要更换申请的高德服务；要用【web端】；
————————
