便利贴--18{h5原生获取经纬度}

本文介绍了一种使用H5原生API获取用户当前位置的方法,并详细展示了如何通过navigator.geolocation API来获取经纬度信息。文章包括了错误处理、权限请求及如何显示获取结果。

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

便利贴--18{h5原生获取经纬度}

结果

在这里插入图片描述

使用

 that.$store.commit("GET_NOWPOSITION", (res) => {
          console.log(res);
          doit(res);
        });

代码

import { Message } from "element-ui";
// import BMap from "./mobilePositionLID";
const mobilePosition = {
  state: { getSPosition: null },
  mutations: {
    GET_NOWPOSITION(state, val) {
      let outData =
        val ||
        function (res) {
          console.log(res);
        };
      let startTime = new Date().getTime(),
        endTime;
      console.log(startTime, "startTime");
      let times = (dateBegin) => {
        var dateDiff = new Date().getTime() - dateBegin; //时间差的毫秒数
        var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)); //计算出相差天数
        var leave1 = dateDiff % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
        var hours = Math.floor(leave1 / (3600 * 1000)); //计算出小时数
        //计算相差分钟数
        var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
        var minutes = Math.floor(leave2 / (60 * 1000)); //计算相差分钟数
        //计算相差秒数
        var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
        var seconds = Math.round(leave3 / 1000);
        var leave4 = leave3 % (60 * 1000); //计算分钟数后剩余的毫秒数
        var minseconds = Math.round(leave4 / 1000);
        var timeFn =
          "耗时:" +
          dayDiff +
          "天 " +
          hours +
          "小时 " +
          minutes +
          " 分钟" +
          seconds +
          " 秒" +
          minseconds +
          "毫秒";
        console.log(timeFn);
        return timeFn;
      };
      if (navigator.geolocation) {
        let success = function (position) {
          console.log(position);
          times(startTime);
          var lat = position.coords.latitude;
          var lon = position.coords.longitude;
          console.log("成功返回经纬度信息");
          Message({
            showClose: true,
            message:
              "成功返回经纬度信息" +
              lon +
              "_" +
              lat +
              "--反应时间:" +
              times(startTime),
            type: "success",
            duration: 0,
          });
          console.log(lon, lat, "成功");
          outData([lon, lat]);
        };
        let error = function (error) {
          // console.log(error, "失败");
          outData(["失败", "失败"]);
          let msg = "";
          switch (error.code) {
            case error.PERMISSION_DENIED:
              msg = "User denied the request for Geolocation.";
              break;
            case error.POSITION_UNAVAILABLE:
              msg = "Location information is unavailable.";
              break;
            case error.TIMEOUT:
              msg = "The request to get user location timed out.";
              break;
            case error.UNKNOWN_ERROR:
              msg = "An unknown error occurred.";
              break;
          }
          Message({
            showClose: true,
            message:
              "定位获取失败-msg:" +
              msg +
              "------" +
              error.message +
              "--反应时间:" +
              times(startTime),
            type: "error",
            duration: 0,
          });
        };
        let options = {
          enableHighAccuracy: true,
          // timeout: 5000,
          maximumAge: 0,
        };
        state.getSPosition = navigator.geolocation.getCurrentPosition(
          success,
          error,
          options
        );
      } else {
        console.log("不支持navigator.geolocation");
        Message({
          showClose: true,
          message: "不支持定位",
          type: "warning",
          duration: 0,
        });
        return "不支持navigator.geolocation";
      }
    },
    CLOSE_NOWPOSITION(state) {
      // if (state.getSPosition && navigator.geolocation) {
      //   navigator.geolocation.clearWatch(state.getSPosition);
      //   state.getSPosition = null;
      // }
    },
  },
  actions: {},
};

export default mobilePosition;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

轻动琴弦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值