vue使用高德地图获取当前经纬度

最新推荐文章于 2025-03-17 10:25:35 发布

V_AYA_V

最新推荐文章于 2025-03-17 10:25:35 发布

阅读量3.8k

点赞数 4

文章标签： vue 定位

本文链接：https://blog.youkuaiyun.com/V_AYA_V/article/details/105275063

版权

本文介绍在Vue项目中如何利用高德地图API动态CDN引入，封装获取经纬度的方法，并通过Promise处理异步操作。同时，解决在Vue组件中使用AMap可能遇到的'AMap is not defined'问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue使用高德地图Api获取当前经纬度信息

在utils里面新建getLocation.js 封装获取经纬度的公用方法(优化加载速度动态cdn引入高德地图) 由于高德Api方法获取当前经纬度比较慢，如果需求是在获取到当前经纬度数据之后请求一些数据，需要搭配promise使用保证获取到经纬度信息。具体见下面代码

function loadSDK() {
   
  if (window.AMap) return
  return new Promise((resolve, reject) => {
   
    const script = document.createElement('script')
    script.src =
      'http://webapi.amap.com/maps?v=1.4.6&key=*****************' //***为申请的高德key
    document.head.appendChild(script)
    script.onload = resolve
    script.onerror = reject
  })
}

export default async () => {
   
  await loadSDK()
  return new Promise((resolve) => {
   
    // eslint-disable-next-line no-undef
    AMap.plugin('