自定义小程序(授权)获取当前位置组件

最新推荐文章于 2023-03-20 21:42:13 发布
最新推荐文章于 2023-03-20 21:42:13 发布
阅读量925 收藏
点赞数
分类专栏： 小程序 前端 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lyxgoodLucky/article/details/105047011
版权

小程序(授权)获取当前位置

（1）用户授权
（2）获取经纬度
（3）转化经纬度信息为具体位置信息

实现功能：
自定义小程序(授权)获取当前位置组件，地址既可以手动输入页也可以点击图标授权获取
（1）一个页面多处引用该组件
（2）首次拒绝授权之后，二次授权的处理

1、用户授权

（1）在app.json中配置 地理位置用途说明

{
      "permission": {
      "scope.userLocation": {
        "desc": "您的位置信息将用于小程序位置展示"
      }
}

（2）校验位置权限是否打开

使用 wx.getSetting 获取所有已授权接口。 该接口会返回一个 authSetting 对象， 里面包含了所有的授权结果。

 getUserLocation(){
      let that = this;
      // 获取用户的授权信息
      wx.getSetting({
        success: (res) => {
          // res.authSetting['scope.userLocation'] == undefined    表示 初始化进入该页面
          // res.authSetting['scope.userLocation'] == false    表示 非初始化进入该页面,且未授权
          // res.authSetting['scope.userLocation'] == true    表示 地理位置授权
          console.log(res)
          //如果是首次进入
          if (res.authSetting['scope.userLocation'] == undefined){
              console.log("首次进入")
              that.getLocation(); 
          } else{
            //如果不是首次进入
            if (res.authSetting['scope.userLocation'] == true){
                // 授权成功之后
                that.getLocation();
            }else{
                // 未授权，提示去授权
              wx.showModal({
                title: '请求授权当前位置',
                content: '需要获取您的地理位置，请确认授权',
                success: function (res) {
                  if (res.cancel) {
                    wx.showToast({
                      title: '拒绝授权',
                      icon: 'none',
                      duration: 1000
                    })
                  } else if (res.confirm) {
                    wx.openSetting({
                      success: function (res) {
                        console.log(res)
                        if (res.authSetting["scope.userLocation"] == true) {
                          wx.showToast({
                            title: '授权成功',
                            icon: 'success',
                            duration: 1000
                          })
                          //调用wx.getLocation的API
                          that.getLocation();
                        } else {
                          wx.showToast({
                            title: '授权失败',
                            icon: 'none',
                            duration: 1000
                          })
                        }
                      }
                    })
                  }
                }
              })
            }
          }
        
        }

      })  
    },

以上代码的逻辑是：

（1）先获取用户授权列表。 获取 scope.userLocation 的值
（2）如果scope.userLocation为undefined，则第一次进入，直接调用wx.getLocation的API,如果不是首次进入，则判断有没有授权，如果已经授权则直接调用wx.getLocation的API,如果没有授权则提示去授权，如果点了确定，就使用
wx.openSetting 接口代开权限设置界面，让用户进行二次授权，授权成功之后调用wx.getLocation的API

2、获取经纬度

授权成功之后调用wx.getLocation的API获取经纬度
代码如下：

getLocation(){
  let that = this;
    wx.getLocation({
      type: 'wgs84',
      success(res) {
        console.log(res)
        const latitude = res.latitude
        const longitude = res.longitude
        const speed = res.speed
        const accuracy = res.accuracy
        that.getLocal(latitude, longitude)
      }, fail: function (res) {
          console.log('fail' + JSON.stringify(res))
      }
    })
},

3、转化经纬度信息为具体位置信息

授权成功获取经纬度之后，借助于**微信小程序JavaScript SDK** 对返回的 latitude longitude 解析为 如下这种形式：
在这里插入图片描述
流程如下：
组件头部引入：

 var QQMapWX = require('../../utils/qqmap-wx-jssdk.js'); //引入sdk
var qqmapsdk;
//生命周期 created()里面实例化API核心类
  created(){
    // 实例化API核心类
    qqmapsdk = new QQMapWX({
      key: '。。。。'
    });
  },

方法里面：

    // 获取当前地理位置
  getLocal: function (latitude, longitude) {
      let that = this;
      qqmapsdk.reverseGeocoder({
        //本接口提供由坐标到坐标所在位置的文字描述的转换，输入坐标返回地理位置信息和附近poi列表。
        location: {
          latitude: latitude,
          longitude: longitude
        },
        success: function (res) {
          if(res.status==0){
               console.log(res)
                var address = res.result.address;
                let mapData = {
                  address: address,
                  dataTime: that.data.dataTime
                }
                //传递给父组件
                that.triggerEvent("getLocation", mapData)
          }  
        },fail:function(res){
             console.log(res)
        }
      })
    }

最后贴上完整的代码：

app.json
"permission": {
      "scope.userLocation": {
        "desc": "您的位置信息将用于小程序位置展示"
      }
    }

子组件中：
map.wxml

<view class="location_p" bindtap="getUserLocation">
        <image src="/images/exitIemperature/place.png" class="map_icon"></image>
</view>

map.js

const app = getApp()
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js'); //引入sdk
var qqmapsdk;
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    dataTime:{   //类型
      type: String,
      value: "",
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },
  created(){
    // 实例化API核心类
    qqmapsdk = new QQMapWX({
      key: '。。。。'  //申请的key
    });

  },
  ready(){

  },
  /**
   * 组件的方法列表
   */
  methods: {
     // 判断用户是否拒绝地理位置信息授权，拒绝的话重新请求授权
    getUserLocation(){
      let that = this;
      // 获取用户的授权信息
      wx.getSetting({
        success: (res) => {
          // res.authSetting['scope.userLocation'] == undefined    表示 初始化进入该页面
          // res.authSetting['scope.userLocation'] == false    表示 非初始化进入该页面,且未授权
          // res.authSetting['scope.userLocation'] == true    表示 地理位置授权
          console.log(res)
          //如果是第一次进入
          if (res.authSetting['scope.userLocation'] == undefined){
              console.log("第一次进入")
              that.getLocation();
              
          } else{
            //如果不是第一次进入
            if (res.authSetting['scope.userLocation'] == true){
                // 授权成功之后
                that.getLocation();
            }else{
                // 未授权，提示去授权
              wx.showModal({
                title: '请求授权当前位置',
                content: '需要获取您的地理位置，请确认授权',
                success: function (res) {
                  if (res.cancel) {
                    wx.showToast({
                      title: '拒绝授权',
                      icon: 'none',
                      duration: 1000
                    })
                  } else if (res.confirm) {
                    wx.openSetting({
                      success: function (dataAu) {
                        console.log(dataAu)
                        if (dataAu.authSetting["scope.userLocation"] == true) {
                          wx.showToast({
                            title: '授权成功',
                            icon: 'success',
                            duration: 1000
                          })
                          //调用wx.getLocation的API
                          that.getLocation();
                        } else {
                          wx.showToast({
                            title: '授权失败',
                            icon: 'none',
                            duration: 1000
                          })
                        }
                      }
                    })
                  }
                }
              })
            }
          }
        
        }

      })
       
    },
    getLocation(){
      let that = this;
        wx.getLocation({
          type: 'wgs84',
          success(res) {
            console.log(res)
            const latitude = res.latitude
            const longitude = res.longitude
            const speed = res.speed
            const accuracy = res.accuracy
            that.getLocal(latitude, longitude)
          }, fail: function (res) {
              console.log('fail' + JSON.stringify(res))
          }
        })
    },
    // 获取当前地理位置
    getLocal: function (latitude, longitude) {
      let that = this;
      qqmapsdk.reverseGeocoder({
        //本接口提供由坐标到坐标所在位置的文字描述的转换，输入坐标返回地理位置信息和附近poi列表。
        location: {
          latitude: latitude,
          longitude: longitude
        },
        success: function (res) {
          if(res.status==0){
              console.log(res)
            var address = res.result.address;
            let mapData = {
              address: address,
              dataTime: that.data.dataTime
            }
            //传递给父组件
            that.triggerEvent("getLocation", mapData)
          }  
        },fail:function(res){
             console.log(res)
        }
      })
    }

  }
})

map.wxss

/* components/map/map.wxss */
.location_p{
    width: 60rpx;
    text-align: right;
   line-height: 82rpx;
    height: 82rpx;
}
.location_p .map_icon{
  width: 40rpx;
  height: 40rpx;
}
.default_status{
   color: #787878;
    padding-left: 10rpx;
    line-height: 82rpx;
    height: 82rpx;
}
.curr_status{
   color: #000;
    padding-left: 10rpx;
    line-height: 82rpx;
    height: 82rpx;
}

父组件：

  <view class="info_li">
        <view class="info_name">位置:</view>
          <view class="info_text">
               <input type="text"  placeholder="点击图标获取位置" value='{{amAddress}}' bindinput='pickerChange'/>
                  <!-- 引入组件的地方 -->
                <mapLocation dataTime="{{dataTimeAm}}"  class="map_box" bind:getLocation="getLocation"></mapLocation>
            </view> 
  </view>

  data:{
         dataTimeAm:'am', //区分上午还是下午地图组件
         dataTimePm:'pm',
         amAddress: "", //上午位置
         pmAddress:"",
  },
   pickerChange: function (e) {
    this.setData({
      amAddress: e.detail.value
    })
  },
      // 获取位置
  getLocation(e){
    console.log(e.detail)
    var mapData = e.detail;
    if (mapData.dataTime == 'am') {
      this.setData({
        amAddress: mapData.address
      })
    } else {
      this.setData({
        pmAddress: mapData.address
      })
    }    
  },

效果图如下：

在这里插入图片描述

点击取消,授权失败
在这里插入图片描述
第二次进入，点击确定。跳转到设置页面
在这里插入图片描述

设置页面：
在这里插入图片描述

打开开关，返回之后发现已经获取到位置：
在这里插入图片描述
在这里插入图片描述
注意：贴上微信开发平台最新的信息
在这里插入图片描述

Tip：如果回显地址的地方直接使用input会发现，内容过长的情况下不支持换行，并且在失去焦点的情况下，不支持滑动，就会出现地址在页面显示不全的情况，此时也许你会想到用textarea，但是其实小程序原生的textarea坑也很多，想用input，又想可以回显换行，这种情况下，可以前往
解决input内容过长，内容显示不全的问题

海绵宝宝lyx
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
腾讯地图api开发的微信小程序电子围栏
09-13
1. **腾讯地图API集成**：首先，开发者需要在腾讯地图开放平台上注册并获取API密钥，以便在小程序中合法调用地图服务。腾讯地图API提供了JavaScript SDK，适用于微信小程序环境。 2. **定位服务**：使用腾讯地图API...
微信小程序使用wx.getLocation获取定位，点击取消后打开手机设置，重新获取定位
01-19
`wx.getLocation` 是微信小程序API中用于获取用户当前地理位置的重要方法。当用户拒绝授权或者首次使用时，需要引导用户开启位置权限。本文将详细探讨如何在用户点击取消获取定位后，引导他们进入手机设置并重新授权...
vue中获取组件的位置
SeeU
08-03 5185
获取dom元素的位置信息 this.$refs['通过设置ref获取到的dom元素'].getBoundingClientRect(); //示例: 获取元素距离顶部的距离 1 this.$refs.selectLi.getBoundingClientRect().top
关于小程序授权地理位置（wx.getLocation + 用户体验）
weixin_30512089的博客
09-03 276
wx.getLocation 如果用户曾点击过一次 “确认授权” ， 那么再次调用该接口时将不会出现弹出框（可以直接拿到经纬度） 关于用户体验： 　　在 onLoad 中判断： 　　　　如果用户之前“没有触发过“授权地理位置事件，则发起请求授权-----> 如果同意授权，直接拿到经纬度处理逻辑； 　　　　　　　　　　　　　　　　　　　　　　...
微信小程序获取经纬度，当前定位
weixin_46337813的博客
10-26 1853
微信小程序获取地理位置授权，首先需要在app.json中添加配置： "permission": { "scope.userLocation": { "desc": "我们将获取你的位置" } } 获取经纬度：如果手机未开启位置信息，那么授权成功后在wx.getLocation()方法中也会一直失败，所以需要在fail方法中提示用户开启手机位置信息 getUserLocation: function () { let vm = this wx.getSetting({...
微信小程序---组件通信---使用selectComponent获取组件实例
m0_48546501的博客
03-20 7586
微信小程序---组件通信---使用selectComponent获取组件实例
java获取组件位置_java – 获取swing组件的位置
weixin_31133021的博客
02-13 801
将你的JPanel添加到JFrames contentPane,这样你就可以使用getX()和get()获得X和Y坐标,虽然我建议先添加所有组件,因为这些点可能随着更多组件的添加而变化,然后变为trashgod说只需在框架实例上调用pack().我做了一个简短的样本来证明：import java.awt.BorderLayout;import javax.swing.JFrame;import j...
物品回收微信小程序源码.rar
07-13
物品回收可能涉及到地理位置服务，源码中可能会利用微信小程序的`wx.getLocation`获取用户当前位置，并通过`wx.openLocation`或第三方地图插件显示地图，帮助用户找到最近的回收站点。 5. **表单组件**： 回收...
微信小程序项目资源.zip
05-07
11. **用户授权**：为了保护用户隐私，小程序需要获取用户授权才能访问某些数据或功能，如通讯录、相册、位置等。`wx.authorize`和`wx.openSetting`等API用于处理用户授权。 12. **推送通知**：微信小程序支持消息...
仿拉勾网微信小程序 源码
最新发布
05-30
综上所述，“仿拉勾网微信小程序”源码涵盖了微信小程序开发的多个方面，包括基础架构、组件使用、API调用、用户交互以及性能优化。通过研究这个项目，开发者不仅可以学习到微信小程序开发的实战技能，还能了解招聘...
微信小程序开发之——map组件
热门推荐
我的博客
09-27 1万+
wx.getLocation获取用户当前位置信息map组件的基础属性(显示带有方向的当前定位点，显示指南针，开启卫星图)map添加标记点markermore。
微信小程序之地图组件
qq_34907249的博客
08-31 2748
官方提供好了 map组件直接使用即可，具体配置可以参考demo1、配置权限"desc": "请求获取地理信息"}}2、使用mapwx.getLocation() 可以获取当前位置，需要在小程序中申请，也可以使用demo中的方式获取(如下api获取上下文对象，再进行对应功能的获取)...
微信小程序组件的定位
qq_41518266的博客
11-22 2774
一、相对定位绝对定位 相对定位：相对自身定位 { position: relative; top: 50rpx; left:50rpx } 绝对定位：相对离它最近的一个已定位的父级元素定位 { position: absolute; top: 50rpx; left:50rpx } 二、margin和padding  margin用来隔开容器与容器间的间距  padd...
如何获取控件所在的坐标位置
平面到立体
07-29 1万+
窗口的坐标体系及接口 获取坐标的接口在Widget类中，即控件的坐标信息属于基类的成员。基本的坐标体系如图所示 通过接口打印出 lable_3的坐标值 print(self.label_3.geometry().x()) print(self.label_3.geometry().y()) 　　　 　　　在实例的初始化接口__init__中调用这个接口获取到的值是０，非实际情...
uniapp-h5获取子组件在页面中的位置
m0_50080847的博客
07-28 422
编译环境 HbuilderX 3.4.18 windows11 需求：在custom 页面里引入了 tuandan-plate 组件。 需要获取组件信息 解决问题： 1. 在custom 页面 的 tuandan-plate 组件上添加 id="plate"， 2. 在 tuandan-plate 组件里的 mounted() 去获取 id   操作：    mounted() { ...
React Native获取组件在屏幕上的绝对位置（包括自定义组件）
找到了最重要的事情
11-10 1万+
react native 组件要获取组件在当前屏幕上的绝对位置一般都是通measure 方法如下： ref1.measure((frameX, frameY, frameWidth, frameHeight, pageX, pageY) => {       //pageX,pageY就是绝对位置       }); 但这个如果组件是自定义组件话就会找不报找不到measu
微信小程序获取子组件相对于页面而言距离顶部的距离
肖肖肖丽珠的博客
09-23 1043
res[0].top,//#member节点的距离顶部的距离。">想知道我的高度
User Location获取用户当前的位置
Never__mind的博客
07-31 1311
步骤如下： 1.AndroidManifest.xml <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/> 2.LocationManager得到和用户定位相关的服务LocationManager locationManager=(LocationManager)MainAc
【小程序原生】
weixin_47416539的博客
10-27 2049
在小程序里面，事件有两套，一个就是咱们bind有事件冒泡机制，另外一套就是catch阻止事件冒泡机制的，他们两套拥有的事件是一样的。函数不能直接渲染出数据—data html—{{b()}}这么写展示不出来。做拖拽的时候注意把下拉刷新禁止了不然拖拽的时候会触发。只允许一个js里面有一个，也支持es6的模块语法。
微信小程序map定位当前位置
06-23
### 回答1： 微信小程序是一种轻量化的应用程序，可以在微信中直接使用。它具有快速开发、轻便易用等优点。其中，微信小程序map组件可以用于定位当前位置。 首先，在小程序开发工具中添加map组件，可以利用微信提供的API进行对地图的操作。然后，在页面上添加按钮或者其他交互方式，触发定位功能。可以通过微信提供的wx.getLocation接口获取当前地理位置，将其坐标转换为经纬度等信息，再在地图上显示出来。 微信小程序map组件还可以加入自定义的标记点、路线等功能。比如，可以在地图上设置一个目标地点，当用户到达该地点时进行提醒。除此之外，还可以将地图与其他组件联动，实现更多实用性功能。 总之，通过微信小程序map组件定位当前位置可以在很多场景下得到运用，例如共享单车、打车等领域，也为用户带来更加便利和舒适的出行体验。 ### 回答2： 微信小程序的定位功能可以让用户在地图上查看自己的当前位置，并且可以进行定位导航等一系列应用操作。 要使用微信小程序的定位功能，首先需要获取用户的授权。用户可以通过点击相关按钮进行授权，同时小程序需要向用户说明获取授权的作用和用途。 获取授权后，就可以通过小程序调用微信地图API，实现对用户当前位置的定位功能。用户当前位置会在地图上进行标注，并且可以实现定位导航、查询周边信息等功能。 除了获取授权和调用API之外，开发者还需要考虑到用户体验和隐私保护等方面。比如，在页面显示用户当前位置时要注意保护用户隐私，使用合适的地图标识等。 总体来说，微信小程序的定位功能可以方便用户在不同场景下使用地图，同时也增加了小程序的实用性。对开发者而言，需要注意用户隐私和开发规范等方面的问题，以保证用户体验和小程序功能的完善。 ### 回答3： 微信小程序中提供了一种方便的方法，可以使用map组件定位当前位置。这个组件可以用来显示地图和标记位置，还可以选择地图的种类和放大程度。在小程序中，我们只需要在wxml文件中添加map组件，然后在js文件中调用API即可进行位置定位。 首先，我们需要引入wx.getLocation() API，这个API可以获得当前用户的地理位置。通过这个API获得的经纬度信息，我们可以通过地图定位到用户的当前位置。在js文件中添加如下代码，就可以实现定位操作： ``` wx.getLocation({ type: 'gcj02', success(res) { const latitude = res.latitude const longitude = res.longitude const speed = res.speed const accuracy = res.accuracy } }) ``` 其中，type参数可以设置定位方式，gcj02表示国测局加密经纬度坐标，还有其他选项，具体可以查看文档。通过上述代码，我们得到用户的经纬度位置，并可以通过map组件显示在地图上。 ``` <map latitude="{{latitude}}" longitude="{{longitude}}" scale="{{scale}}" markers="{{markers}}" show-location="{{true}}" /> ``` 最后，在wxml文件中加入map组件即可。其中，latitude和longitude参数分别表示经纬度位置，scale参数表示显示比例尺，markers参数可以设置地图标记，show-location参数表示是否显示定位标记。 总之，通过微信小程序的map组件和wx.getLocation() API，我们可以轻松实现定位当前位置的操作。这一功能在很多小程序中都会用到，比如地图导航、外卖送餐等等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值