使用vue3结合高德实现定位功能

<scriptsrc="//webapi.amap.com/maps?v=2.0&key=自己申请的key"></script>

constgetLocation= () => {
// eslint-disable-next-line no-undefAMap.plugin('AMap.Geolocation', function () {
vargeolocation=newAMap.Geolocation({
// 是否使用高精度定位，默认：trueenableHighAccuracy: true,
// 设置定位超时时间，默认：无穷大timeout: 10000    })
//进行IP城市查询geolocation.getCityInfo(function (status, result) {
if (status=='complete') {
console.log(result, 'Ip获取的')
      } else {
onError(result)
      }
    })
//获取用户当前的精确位置信息(经纬度)geolocation.getCurrentPosition(function (status, result) {
if (status=='complete') {
console.log(result)
      } else {
onError(result)
      }
    })
  })
//定位错误，使用另一方式定位functiononError (_data) {
console.log('🚀 ~ file: AboutView.vue ~ line 72 ~ onError ~ _data', _data)
getLngLatLocation()
  }
}
constgetLngLatLocation= () => {
//只获取城市级别的定位信息AMap.plugin('AMap.CitySearch', function () {
varcitySearch=newAMap.CitySearch()
citySearch.getLocalCity(function (status, result) {
if (status==='complete'&&result.info==='OK') {
// 查询成功，result即为当前所在城市信息console.log('通过ip获取当前城市：', result)
self.cityName=result.cityself.cityCode=result.adcodevarlnglat=result.rectangle.split(';')[0].split(',')
self.longitude=lnglat[0]
self.latitude=lnglat[1]
//逆向地理编码查询地理位置详细信息AMap.plugin('AMap.Geocoder', function () {
vargeocoder=newAMap.Geocoder({
// city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycodecity: result.adcode          })
varlnglat=result.rectangle.split(';')[0].split(',')
geocoder.getAddress(lnglat, function (status, data) {
if (status==='complete'&&data.info==='OK') {
// result为对应的地理位置详细信息console.log(data, '地理位置')
            }
          })
        })
      } else {
      }
    })
  })
}
getLocation()

configureWebpack: {
externals: {
'AMap': 'AMap'// 高德地图配置        }
    }

importAMapfrom'AMap'