高德地图通过地理位置转经纬度,报跨域问题解决方法 https://restapi.amap.com/v3/geocode/

最新推荐文章于 2024-06-07 09:42:42 发布

朵朵奇葩向阳开＃

最新推荐文章于 2024-06-07 09:42:42 发布

阅读量3.1k

点赞数

分类专栏： vue 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_44410862/article/details/125276085

版权

vue 专栏收录该内容

26 篇文章 4 订阅

订阅专栏

高德地图通过地理位置转经纬度,报跨域问题解决方法通过代理可以解决

// 高德地图代理
      '/amap': {
        target: 'https://restapi.amap.com/v3/geocode/',
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/amap': ''
        }
      }

在这里插入图片描述

封装成方法导出在需要的地方引用装换就可以

// 根据地址 查询经纬度
export function addressToLngLat (address) {
  return new Promise((resolve, reject) => {
    axios.defaults.baseURL = ''
    let locationStr = ''
    axios
      .get(
        '/amap/geo', {
        params: {
          address: address,
          s: 'rsv',
          city: '35',
          key: ''
        }
      }
      )
      .then((res) => {
        if (res.geocodes && res.geocodes.length > 0) {
          resolve(locationStr)
        } else {
          locationStr = ''
          resolve(locationStr)
        }
      })
  })
}

使用直接掉方法

  // 输入地址自动补全经纬度
    async addressAutoCompleteLngLat (event) {
      let address = event
      let lngLatStr = await addressToLngLat(address)
      console.log（lngLatStr ）
    },