微信小程序【关于地址信息的接入以及自动选择当前位置】

简介: 微信小程序【关于地址信息的接入以及自动选择当前位置】

在做收货地址的时候,通常会让用户填写或者打开地图选择收获地址,此时就需要用到微信提供的地址API,在使用地址API的时候需要注册对应的API,而且地址API会经常调整,需要关注官方公告,下面就是关于地址API的使用。

第一部分

先看下此设置有没有打开

进入微信开发者文档,在API下找到位置,此处就是位置信息API了

在使用位置信息之前,需要在app.json中注册位置信息api

此处我使用的是wx.chooseLocation,所以在app.json中注册这个api即可


注册完成后,在页面使用

//   选择地址 在事件内调用这个api即可
      wx.chooseLocation({
        latitude: 0,
        success(res){
            console.log(res);  // 选择的地址信息
        }
      })
    },

第二部分

部分API会弹出需要在app.json中声明permission字段

虽然在requiredPrivateInfos注册过

但是还需要在permission中注册

此时再使用API即可

// 获取当前地址信息
    wx.getLocation({
        type: 'gcj02', //返回可以用于 wx.openLocation 的经纬度
        success (res) {
          const latitude = res.latitude  // 维度
          const longitude = res.longitude  // 经度
          wx.openLocation({
            latitude,
            longitude,
            scale: 18
          })
        }
       })

打开位置信息,自动定位到当前位置

// 地址
    addAddress(){
        let that = this
    //   选择地址
   wx.getLocation({    // 获取当前地址信息,地理位置、速度
    type: 'gcj02', //返回可以用于 wx.openLocation 的经纬度
    success (res) {
      const latitude = res.latitude  // 维度
      const longitude = res.longitude  // 经度
      wx.chooseLocation({   // 通过经纬度自动定位到当前位置
        latitude,   // 维度
        longitude,  // 经度
        success(res){
            wx.setStorageSync('address', res.address+res.name)   
            that.setData({
                address : res.address+res.name  // 将当前位置信息保存,回显
            })
        }
      })
    }
   })
    },
目录
相关文章
|
1月前
|
小程序 JavaScript
微信小程序之input组件及其获取用户输入信息
微信小程序之input组件及其获取用户输入信息
56 1
|
3月前
|
缓存 JavaScript 前端开发
微信 JS-SDK Demo “分享信息设置” API 及数字签名生成方法(NodeJS版本)
微信 JS-SDK Demo “分享信息设置” API 及数字签名生成方法(NodeJS版本)更新时间(2020-10-29)
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的高校毕业生就业信息系统小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的高校毕业生就业信息系统小程序附带文章源码部署视频讲解等
51 2
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的招聘信息推荐系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的招聘信息推荐系统附带文章源码部署视频讲解等
29 0
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的数据分析岗位招聘信息与分析附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的数据分析岗位招聘信息与分析附带文章源码部署视频讲解等
22 0
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的校园二手市场信息发布系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的校园二手市场信息发布系统附带文章源码部署视频讲解等
34 0
|
4月前
|
算法 安全 数据安全/隐私保护
支付系统---微信支付09------数字签名,现在Bob想要给Pink写一封信,信件的内容不需要加密,怎样能够保证信息的完整性,使用信息完整性的主要手段是摘要算法,散列函数,哈希函数,H称为数据指纹
支付系统---微信支付09------数字签名,现在Bob想要给Pink写一封信,信件的内容不需要加密,怎样能够保证信息的完整性,使用信息完整性的主要手段是摘要算法,散列函数,哈希函数,H称为数据指纹
|
4月前
|
小程序 定位技术
微信小程序实战——获取用户地理位置信息
微信小程序实战——获取用户地理位置信息
76 0
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的速达物流信息查询微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的速达物流信息查询微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
1月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
226 3

热门文章

最新文章

下一篇
无影云桌面