vue3+高德api 拿到用户地理位置

在很多项目里，无论小程序还是h5或者pc端，总有要地理位置的需求...而这些功能或者代码又太简单，有些大神不愿意写，以后我所有的博文都是为了新手和像我一样的初级者而写而方便，对于初学者来说，总有些痛点难点，或者一些说不清的bug，而我会一一记录，方便他人.....

1.浏览器搜索并打开高德开放平台，注册进来以后

2.填写你的项目名称，然后选我图中标记的web服务，然后勾选同意服务，点击确定，一个key就创建好了

3.直接复制我以下代码到你的页面里，然后复制图一中你申请的的key粘贴到代码里我标的位置

const getIPCity = async () => {
      try {
        // 使用高德API的IP定位服务获取IP省市信息
        const ipResponse = await axios.get(
          'https://restapi.amap.com/v3/ip?key=这儿填写你刚刚申请到的key复制粘贴到这'
        );
        console.log('ipResponse', ipResponse.data);//ipResponse.data打印拿到了你所在的城市
        
        // 假设ipResponse.data的结构是正确的，并且包含rectangle字段
        if (ipResponse.data && ipResponse.data.rectangle) {
          const parts = ipResponse.data.rectangle.split(";");
          console.log('parts', parts);//parts拿到了经度和纬度
          getAddressByLatLng(parts);//回调下方的函数
        }
      } catch (error) {
        console.error('IP定位失败', error);
      }
    };

    const getAddressByLatLng = async (ip: string[]) => {
      console.log("ip", ip);
      try {
        // 使用高德API的地理编码服务将经纬度转换成地址
        const lat = ip;
        const lng = ip;
        console.log('lat是', lat);

        const latlng = `${lat},${lng}`;//将经度纬度拼接起来传给api地址
        const geoResponse = await axios.get(
          `https://restapi.amap.com/v3/geocode/regeo?key=这儿填写你刚刚申请到的key复制粘贴到这&location=${latlng}`
        );
        console.log('geoResponse是', geoResponse.data); 

        const addresskunnan = geoResponse.data.regeocode.formatted_address;
        console.log('addresskunnan是', addresskunnan);//拿到了具体的城市和区和村和地址

        address.value = addresskunnan.substring(0, 6);//但是我只想要城市和区所以我就截取了一下前6个字符
      
      } catch (error) {
        console.error('地理编码失败', error);
      }}

然后在生命周期里getIPCity（）；，每次进入页面就会自动获取地理位置并且存在定义的addres里，控制台也会打印出来.

4.切记要引入axios，import axios from 'axios';不然以上请求高德api会报错

5.最后addres.value就把拿到的城市和区给存起来了，可以传给后端也可以在页面中展示...