Vue实现定位功能并且在移动端能获取定位

在vue的项目中难免会碰到获取当前定位的功能要求，接下来是我个人的获取定位的办法

//获取经纬度
getLocation(){
 navigator.geolocation.getCurrentPosition(
          (position) => {
            // this.location = `纬度: ${position.coords.latitude}, 经度: ${position.coords.longitude}`;
            const lat = String(
              Number(parseFloat(`${position.coords.latitude}`).toFixed(6))
            );
            const lon = String(
              Number(parseFloat(`${position.coords.longitude}`).toFixed(6))
            );
            this.getLocationDetails(lon, lat);
          },
          (error) => {
            console.error(error.message);
          }
        );
}
//调用逆地理编码API(我这里用的高德，你们可以视情况而定)
async getLocationDetails(longitude, latitude) {
      try {
        const response = await axios.get(
          `https://restapi.amap.com/v3/geocode/regeo?key=你们在开发者平台申请的key&location=${longitude},${latitude}`
        );
        // console.log(response.data);
        const address = response.data.regeocode.formatted_address;
        // console.log("具体位置：", address);
        this.location = address; // 这里的this.location是自己定义在变量，你们根据自己的改一下
      } catch (error) {
        console.error("获取位置信息失败：", error);
      }
    },

这个是简单的通过浏览器自带的navigator.geolocation来定位的办法，这里我做了小数点后六位的处理，所以位置不是那么精准，如果需要精确到具体位置的话可以解开经纬度小数点的限制

另外这里的定位我当时测试的时候在IE浏览器是支持的，但是在谷歌和火狐测试就不支持了，后来查阅资料有个最靠谱的解释是后端要配置SSL证书把http升级成https，因为这个操作方式在不安全的浏览器页面是不支持的，所以大家在碰到这个问题的时候可以去跟后端沟通问一下有没有配置ssl证书。另外在移动端的默认浏览器里也是可以获取地址的哦，但是想在微信内置页面获取需要配置微信的SDK，具体请查看相关资料