微信小程序定位权限怎么打开

2023-10-30

一、 准备工作

既然要定位,那么肯定需要找到跟地图相关的功能API,查找微信开发文档,因为我们这里只是需要记录地位功能,不需要打开地图,所以只使用wx.getLocation 即可。查看这个方法后,发现微信只是提供了定位的经纬度,居然没有提供地点的中文名称,

我们要保存地址,肯定不能只是保存经纬度,这个一般没人能看的懂吧,而坑爹的是,找了一通,我也没发现微信小程序有提供这个功能。在网上搜索了下,百度地图和高德地图由当前经纬度获取地点的API功能。要在高德开放平台建一个定位的应用,步数很简单,第一步类型里选择“导航”,第二步平台项选择“微信小程序”即可,创建好后,会得到一个应用的key。

二、创建小程序项目

先看看小程序中的getLocation这个功能结果到底是什么

打开index.js,将page({})中onLoad 方法中的代码改成如下

wx.getLocation({
      type: 'wgs84',
      success(res) {
        console.log("-----success location-----")
        console.log(res)

        //var latitude = res.latitude
        //var longitude = res.longitude
        // wx.openLocation({
        //   latitude,
        //   longitude,
        //   scale: 18
        // })         

      },
      fail(res) {
        console.log("-----fail location-----")
        console.log(res)      
      }
    });

复制

编译后,如果是第一次使用,应该会报一个需要授权的提醒,那么先要在app.json里添加一段代码

"permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  }

复制

,然后授权定位即可,授权成功后,在控制台就能看到打印的一个json字符串:

重要的是latitude 维度 、 longitude 经度 这2个数据 ; 其余字段的含义,可以查看文档,文档中都有详细解释。

如果把上面代码中的注释部分打开,小程序编译后显示的就是当前的地图。从地图上看,定位是不准确的,原因我没去查,我猜测就是因为通过IP去定位的,所以导致有出入,如果是在手机上查看,定位就是准确的。

三、结合高德地图API定位地点

修改index.wxml文件,将定位的地点名称显示在页面上。

<view>
<text>{
  
  {address}}</text>
<view wx:for="{
  
  {arrAddress}}">
  <text>
    {
  
  {item.address}} -- {
  
  {item.name}}
  </text>
</view>
<button open-type="openSetting">打开授权设置页</button> 
</view>

复制

第一个text标签里存放定位的地点名,循环的view标签先不要管,button是打开授权设置页用的,工具有时候会有问题,当不是第一次使用授权时,有时候不会弹出授权的对话框,可以通过这个按钮直接打开,下面我也会讲如果自定义一个对话框提醒,然后打开授权页面。

查找高德地图提供的定位API,进入高德开放平台网站,找到“开发支持”–>”微信小程序SDK” –> “参考手册”–>”基础类”,

下面的 getPoiAround(Object) 周边POI地址,getRegeo(Object) 定位地址, 均可获取到地址,但我们只是用来地位,用第二个即可。将index.js代码更新如下

const amapFile = require('../../utils/amap-wx.js')
const app = getApp()

Page({
  data: {    
    arrAddress:[],
    address:''
  },  
  onLoad: function () {
    var $that = this;
    wx.getLocation({
      type: 'wgs84',
      success(res) {
        console.log("-----success location-----")
        console.log(res)

        var myAmapFun = new amapFile.AMapWX({ key: app.baseData.gdLocationKey });
        myAmapFun.getRegeo({
          success: function (data) {
            
            //成功回调
            console.log("data ----- ")
            console.log(data)
            
            var address = data[0].desc + "【" + data[0].name + "】"
            $that.setData({ address: address });
          },
          fail: function (info) {
            //失败回调
            console.log(info)
            msg(info.errMsg)
          }
        });      

      },
      fail(res) {
        console.log("-----fail location-----")
        console.log(res)      
      }
    });    
    
  },
  onReady:function(){
    console.log("----onReady-----") 
  }
})

复制

编译后,在模拟器页面上就会出现定位的地点名称,同样存在误差问题,如果用手机就没有问题了。

其实看上面的代码,完全可以不需要用小程序的wx.getLocation ,直接用高德的API就能定位当前地点,这里之所以还是用wx.getLocation,是为了提醒授权的原因,但是只是这样写也是有问题的,如果是非第一次授权,只会报错,不会弹出授权的提醒对话框,这里要自己写一个提醒框。

四、自定义授权地位对话框

先将上面的代码提取到一个方法里,我这里放在了util.js中

module.exports={
  msg:msg,
  getLocation: getLocation
}
function msg(title){  
  wx.showToast({
    title: title,
    icon: "success",
    duration: 1000
  })
}
function getLocation($that) {
  var address ;
  wx.getLocation({
    type: 'wgs84',
    success(res) {
      console.log("-----success location-----")
      console.log(res)
      var myAmapFun = new amapFile.AMapWX({ key: app.baseData.gdLocationKey });
      myAmapFun.getRegeo({
        success: function (data) {
          //成功回调
          console.log("data ----- ")
          console.log(data)          
          address = data[0].desc + "【" + data[0].name+ "】"
          $that.setData({ address: address });
        },
        fail: function (info) {
          //失败回调
          console.log(info)
          msg(info.errMsg)
        }
      })
    },
    fail(res) {
      console.log("-----fail location-----")
      console.log(res)
      //settingLoaction($that)
    }
  });
}

复制

修改index.js

const util = require('../../utils/util.js')
const app = getApp()
Page({
  data: {    
    arrAddress:[],
    address:''
  },  
  onLoad: function () {
    
    console.log("----onLoad-----")
    util.getLocation(this);
    
  }
})

复制

编译后,模拟器中也会出现定位的地点,这时候点击模拟器中“打开授权设置页”按钮,将“使用我的地理位置”开关关闭掉,重新编译小程序,控制台就会报错,但是模拟器并不会弹出授权对话框。即使只是使用高德的API,控制台也会报错:

{errCode: “0”, errMsg: “getLocation:fail auth deny”} 提示未授权定位。

判断有没有授权其实就是通过微信小程序的获取用户的当前设置里面的“scope.userLocation” 是否为true判断。

编写判断方法

function settingLoaction($that){
  wx.getSetting({    
    success: function (res) {
      console.log("-----userLocation-----")
      console.log(res)
      if (res.authSetting['scope.userLocation'] != true) {
        wx.showModal({
          title: '授权当前位置',
          content: '需要获取您的地理位置,请确认授权,否则无法获取您所需数据',
          success: function (res) {
            if (res.cancel) {//点击取消
              msg("授权失败1!")
              getLocation($that)
            } else if (res.confirm) {//点击确定
              wx.openSetting({
                success: function (res) {
                  console.log(res)
                  if (res.authSetting['scope.userLocation'] == true) {
                    msg("授权成功1!")
                    getLocation($that)
                  } else {
                    msg("授权失败2!")
                    getLocation($that)
                  }
                }
              })
            }
          }
        });
      }
    }
  });
}

复制

然后将上面的 getLocation(that)方法中获取定位失败返回函数中注释掉的settingLoaction(that) 开启即可,这时重新编译小程序,会弹出自定义的对话框。我这里写的方法是只有当用户授权了,对话框才会消失,实际用的时候,可以根据自己需要操作。

五、getPoiAround

这个是高德提供的获取经纬度周边20个地址的功能,将上面的getRegeo换成这个即可,然后将值赋给前端即可

$that.setData({ arrAddress: data.markers });

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

微信小程序定位权限怎么打开 的相关文章

  • MMYOLO框架标注、训练、测试全流程(补充篇)

    前言 MMYOLO框架是一个基于PyTorch和MMDetection的YOLO系列算法开源工具箱 MMYOLO定位为YOLO系列热门开源库以及工业应用核心库 MMYOLO框架Github项目地址 支持的任务 目标检测 旋转目标检测 支持的
  • 【blender建模功能】03 倒角工具

    blender 03 倒角工具 基操 宽度类型 其他参数 倒角问题 顶点倒角 1 基础操作 2 宽度类型 3 其他参数 3 1 材质编号 3 2 平滑 3 2 1 自动光滑 3 2 2 硬化法线 3 3 钳制重叠 3 4 外衔接 内衔接 3
  • UE4联网2——视角同步

    在做完子弹的同步后发现和客户端和服务器的玩家的仰角是不同步的 所以在角色代码中加入tick函数更新玩家的仰角pitch 这里我们需要用到一个变量RemoteViewPitch 这是在pawn中定义的已经复制的公有变量 rpc 值得注意的是它
  • 忽略大小写的字符串比较

    问题描述 一般我们用strcmp可比较两个字符串的大小 比较方法为对两个字符串从前往后逐个字符相比较 按 ASCII 码值大小比较 直到出现不同的字符或遇到 0 为止 如果全部字符都相同 则认为相同 如果出现不相同的字符 则以第一个不相同的

随机推荐

  • vue3引用ElementPlus出错|如何在vue中引用TypeScript

    具体错误 直接套用elementplus官方文档里的模版 报错 Module parse failed Unexpected token You may need an additional loader to handle the res
  • 运放噪声如何计算?

    一 噪声 运放的噪声分为 1 电压噪声en v 2 电流噪声在电阻Rs和R1 R2上产生的等效噪声en i 3 电阻的热噪声enr 总输入噪声计算公式 en in sqrt env 2 eni 2 enr 2 总输出噪声计算公式 en ou
  • [第七届蓝帽杯全国大学生网络安全技能大赛 蓝帽杯 2023]——Web方向部分题 详细Writeup

    Web LovePHP 你真的熟悉PHP吗 源码如下
  • 【C++】C++入门

    目录 一 C 关键字 二 命名空间 2 1命名空间的定义 2 2命名空间的使用 2 2 1加命名空间名称和作用域限定符 2 2 2使用using 将命名空间中某个成员引入 2 2 3使用using namespace将命名空间引入 三 C
  • 【KnowledgeBase】CLIP多模态代码试玩

    文章目录 前言 一 CLIP整体流程简述 二 代码试玩 参考 前言 多模态CLIP的推理部分代码简单试玩一下 致敬大佬的CLIP 论文链接 Learning Transferable Visual Models From Natural L
  • JS中的“&&”与“&”和“

    在JavaScript中 和 是逻辑运算符 和 是位运算符 四个运算符主要区别是运算方法不一样 1 JavaScript中的位运算符 运算方法 两个数值的个位分别相与 同时为1才得1 只要一个为0就为0 举个例子 31 2 结果为2 理由
  • python-报错

    报错 异常名称 描述 BaseException 所有异常的基类 SystemExit 解释器请求退出 KeyboardInterrupt 用户中断执行 通常是输入 C Exception 常规错误的基类 StopIteration 迭代器
  • JS 统计字符

    var str id content value replace r n g n var length t str length
  • 使用Koa2进行Web开发(一)

    这篇文章是我正在进行写作的 新时期的Node js入门 的一部分 Connect Express与Koa 为了更好地理解后面的内容 首先需要梳理一下Node中Web框架的发展历程 Connect 在connect官方网站提供的定义是 Con
  • Python实现贝叶斯优化器(Bayes_opt)优化卷积神经网络回归模型(CNN回归算法)项目实战

    说明 这是一个机器学习实战项目 附带数据 代码 文档 视频讲解 如需数据 代码 文档 视频讲解可以直接到文章最后获取 1 项目背景 贝叶斯优化器 BayesianOptimization 是一种黑盒子优化器 用来寻找最优参数 贝叶斯优化器是
  • 从枚举类型的ordinal()方法说起

    文章背景 本周有一个开发任务涉及到了枚举类型的修改 需要对枚举类型新增一项 在新增的时候我没有加在已有项的最后面 而是在中间随便找了个位置 其实也不是很随便 我是根据语义关联性觉得放在某一项后面比较合适 没想到的是 我的无心之举经造成了大
  • 安装centos 8

    安装centos 8 首先下载centos 8镜像 地址 http mirrors aliyun com centos 8 isos x86 64 这里选择了boot版本 boot版与完整版的区别是体积小 通过网络源安装 下载完成大概有70
  • Solidity与dapp开发学习记录4

    目录 函数修饰符进阶 Payable修饰符 运用 取款 Withdraws 运用 准备好设计僵尸对战 随机数 Random Numbers 通过keccak256生成随机数 此方法容易受到不诚实节点的攻击 如何在以太坊中安全地生成随机数 运
  • BASE64Encoder及BASE64Decoder的正确用法

    一直以来Base64的加密解密都是使用sun misc包下的BASE64Encoder及BASE64Decoder的sun misc BASE64Encoder BASE64Decoder类 这人个类是sun公司的内部方法 并没有在java
  • 腾讯云搭建邮局

    想在个人电脑上面搭个邮局临时用一下 没有想到宽带的端口全部被封了 25 110 143本来以为不能发就算了 收也不行了 完全没有办法用 还好腾讯云有按月开通的 先开通一个月试试 花了三十块 开了一个 轻量应用服务器 这里安全方面 没有什么要
  • 系统架构设计高级技能 · 层次式架构设计理论与实践

    现在的一切都是为将来的梦想编织翅膀 让梦想在现实中展翅高飞 Now everything is for the future of dream weaving wings let the dream fly in reality 点击进入系
  • dlopen和 dlsym的使用方式

    背景 为了把不同的逻辑解耦 一般会把各个业务封装成动态库 然后主逻辑去调用各个动态库 这里有个问题是 为什么以前我们都是通过include第三方的头文件 然后通过连接器链接动态库实现 现在却要利用dlopen呢 考虑以下情况 比如我们要用c
  • Spring Data - Spring Data JPA 提供的各种Repository接口

    最近博主越来越懒了 深知这样不行 还是决定努力奋斗 如此一来 就有了一下一波复习 演示代码都基于Spring Boot Spring Data JPA 传送门 博主的测试代码 什么是Spring Data JPA Spring Data 是
  • ubuntu配置静态IP / 重启网络

    系统 Ubuntu14 以及 Ubuntu20 04 一 ubuntu14 配置静态IP 1 找到文件 vim etc network interfaces 2 修改如下部分 interfaces 5 file used by ifup 8
  • 微信小程序定位权限怎么打开

    一 准备工作 既然要定位 那么肯定需要找到跟地图相关的功能API 查找微信开发文档 因为我们这里只是需要记录地位功能 不需要打开地图 所以只使用wx getLocation 即可 查看这个方法后 发现微信只是提供了定位的经纬度 居然没有提供