我的编程空间,编程开发者的网络收藏夹
学习永远不晚

uniapp小程序项目获取位置经纬度信息

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

uniapp小程序项目获取位置经纬度信息

前言

提示:这里可以添加本文要记录的大概内容:

在实际项目中很多时候我们需要获取设备的位置信息,去展示给客户,或者以位置信息为参数,继续向服务器获取一些数据。接下来以uni-app小程序项目为例来介绍获取位置信息的思路

提示:以下是本篇文章正文内容,下面案例可供参考

一、相关代码

  • 判断手机定位是否授权
// 定位授权
    getLocation() {
      let that = this;
      // 1、判断手机定位服务【GPS】 是否授权
      uni.getSystemInfo({
        success(res) {
          console.log("判断手机定位服务是否授权:", res);
          let locationEnabled = res.locationEnabled; //判断手机定位服务是否开启
          let locationAuthorized = res.locationAuthorized; //判断定位服务是否允许微信授权
          if (locationEnabled == false || locationAuthorized == false) {
            //手机定位服务(GPS)未授权
            uni.showToast({
              title: "请打开手机GPS",
              icon: "none",
            });
          } else {
            //手机定位服务(GPS)已授权
            // 2、判断微信小程序是否授权位置信息
            // 微信小程序已授权位置信息
            uni.authorize({
              //授权请求窗口
              scope: "scope.userLocation", //授权的类型
              success: (res) => {
                that.fnGetlocation();
              },
              fail: (err) => {
                err = err["errMsg"];
                uni
                  .showModal({
                    content: "需要授权位置信息",
                    confirmText: "确认授权",
                  })
                  .then((res) => {
                    console.log(res);
                    if (res[1]["confirm"]) {
                      uni.openSetting({
                        success: (res) => {
                          if (res.authSetting["scope.userLocation"]) {
                            // 授权成功
                            uni.showToast({
                              title: "授权成功",
                              icon: "none",
                            });
                            that.fnGetlocation();
                          } else {
                            // 未授权
                            uni.showToast({
                              title: "授权失败,请重新授权",
                              icon: "none",
                            });
                            uni.showModal({
                              title: "授权",
                              content:
                                "获取授权" +
                                authouName +
                                "失败,是否前往授权设置?",
                              success: function (result) {
                                if (result.confirm) {
                                  uni.openSetting();
                                }
                              },
                              fail: function () {
                                uni.showToast({
                                  title: "系统错误!",
                                  icon: "none",
                                });
                              },
                            });
                          }
                        },
                      });
                    }
                    if (res[1]["cancel"]) {
                      // 取消授权
                      uni.showToast({
                        title: "你拒绝了授权,无法获得周边信息",
                        icon: "none",
                      });
                    }
                  });
              },
              complete(res) {
                // console.log('授权弹框', res);
                if (res.errMsg == "authorize:ok") {
                  that.fnGetlocation();
                } else {
                  uni.showModal({
                    title: "授权",
                    content:
                      "获取授权" + authouName + "失败,是否前往授权设置?",
                    success: function (result) {
                      if (result.confirm) {
                        uni.openSetting();
                      }
                    },
                    fail: function () {
                      uni.showToast({
                        title: "系统错误!",
                        icon: "none",
                      });
                    },
                  });
                }
              },
            });
          }
        },
      });
    },
  • 判断小程序是否授权位置信息 (代码在上方)
  • 定位获取
// 定位获取
    fnGetlocation() {
      let that = this;
      uni.getLocation({
        type: "wgs84", //默认为 wgs84 返回 gps 坐标
        geocode: "true",
        isHighAccuracy: "true",
        accuracy: "best", // 精度值为20m
        success: function (res) {
          console.log("定位获取:", res);
          let platform = uni.getSystemInfoSync().platform;
          if (platform == "ios") {
          	//toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。
            that.bindList.long = res.longitude.toFixed(6);
            that.bindList.lat = res.latitude.toFixed(6);
          } else {
            that.bindList.long = res.longitude;
            that.bindList.lat = res.latitude;
          }
          that.bindList.longlat =
            "经度" +
            that.changeTwoDecimal_f(that.bindList.long) +
            "/" +
            "纬度" +
            that.changeTwoDecimal_f(that.bindList.lat);
          that.getAreaCode(res.latitude, res.longitude);
        },
        fail(err) {
          if (
            err.errMsg ===
            "getLocation:fail 频繁调用会增加电量损耗,可考虑使用 wx.onLocationChange 监听地理位置变化"
          ) {
            uni.showToast({
              title: "请勿频繁定位",
              icon: "none",
            });
          }
          if (err.errMsg === "getLocation:fail auth deny") {
            // 未授权
            uni.showToast({
              title: "无法定位,请重新获取位置信息",
              icon: "none",
            });
            authDenyCb && authDenyCb();
            that.isLocated = false;
          }
          if (
            err.errMsg ===
            "getLocation:fail:ERROR_NOCELL&WIFI_LOCATIONSWITCHOFF"
          ) {
            uni.showModal({
              content: "请开启手机定位服务",
              showCancel: false,
            });
          }
        },
      });
    },
  • 通过经纬度坐标获取区域码
// getAreaCode通过经纬度(wgs84)坐标获取区域码
    getAreaCode(latitude, longitude) {
      this.$refs.uForm.resetFields();
      var that = this;
      that.$u.api
        .getAreaCode({
          latitude: latitude,
          longitude: longitude,
        })
        .then((res) => {
          if (res.code == 100000000) {
            console.log("通过经纬度坐标获取区域码:", res);
            // console.log(res, 'areaCode');
            that.bindList.areaCode = res.data.areaCode;
            that.bindList.specificAddress = res.data.detailLocation;
            that.bindList.address = res.data.areaLocation;
          } else {
            uni.showToast({ title: res.msg, icon: "none" });
          }
        })
        .catch((err) => {
          this.loadState = "加载失败err";
          console.log("getDevList_err:", err); //--------------------
        });
    },

二、相关的数据返回

三、效果展示

最后

提示:这里对文章进行总结:
以上就是获取位置信息的大概步骤思路:

  • 判断手机定位服务是否授权(uni.getSystemInfo)
  • 判断小程序是否授权位置信息(uni.authorize)
  • 定位获取(uni.getLocation)
  • 通过经纬度坐标获取区域码,这是通过以经纬度为参数获取后端的数据

到此这篇关于uni-app如何获取位置信息(经纬度)的文章就介绍到这了,更多相关uni-app获取位置内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

uniapp小程序项目获取位置经纬度信息

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

uniapp小程序项目获取位置经纬度信息

在实际项目中很多时候我们需要获取设备的位置信息,去展示给客户,或者以位置信息为参数,继续向服务器获取一些数据,这篇文章主要介绍了uni-app如何获取位置信息(经纬度),需要的朋友可以参考下
2022-11-13

uniapp小程序如何获取位置经纬度信息

本篇内容主要讲解“uniapp小程序如何获取位置经纬度信息”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“uniapp小程序如何获取位置经纬度信息”吧!一、相关代码判断手机定位是否授权// 定位授
2023-07-04

uni-app如何获取位置信息(经纬度)

文章目录 前言一、相关代码二、相关的数据返回三、效果展示最后 前言 提示:这里可以添加本文要记录的大概内容: 在实际项目中很多时候我们需要获取设备的位置信息,去展示给客户,或者以位置信息为参数,继续向服务器获取一些数据。接下来
2023-08-18

高德地图API-获取位置信息的经纬度

开发指南:https://lbs.amap.com/api/webservice/guide/api/georegeo/ 一、首先需要注册成为开发者,注册成功后就可以使用此开放平台。 高德开放平台网址:https://lbs.amap.co
2023-08-30

微信小程序怎么通过API获取当前位置的经纬度

本篇内容介绍了“微信小程序怎么通过API获取当前位置的经纬度”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!效果图:1、wxml文件
2023-06-26

uni.app开发小程序如何获取当前经纬度、位置信息以及如何重新发起授权定位

uni.app开发小程序如何获取当前经纬度、位置信息以及如何重新发起授权定位 前提 先去微信小程序后台申请 wx.getLocation接口1.引入下载的高德小程序SDK2.data中定义所需变量3.onLoad中获取实例 并调用获
2023-08-30

如何使用uniapp开发微信小程序获取当前位置详解

uni-app小程序项目无法直接获取到地理位置,只能通过获取到的经纬度,调用第三方地图Api获取,下面这篇文章主要给大家介绍了关于如何使用uniapp开发微信小程序获取当前位置的相关资料,需要的朋友可以参考下
2022-11-13

编程热搜

目录