用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

微信小程序 - 获取用户地理位置、地址解析及逆地址解析

Rolan 2020-10-15 10:02

小程序需要用户授权获取用户位置,获取到经纬度请求数据列表并解析为城市地址,用户选择城市时把城市解析为经纬度

需求背景

小程序需要用户授权获取用户位置,获取到经纬度请求数据列表并解析为城市地址,用户选择城市时把城市解析为经纬度。

代码实现(项目基于 Taro+react )

1.获取用户授权 (微信小程序文档-指南-开放能力-用户信息-授权)

小程序授权类接口调用时:

  1. 如果用户未接受或拒绝过此权限,会弹窗询问。

  2. 如果用户已授权,可直接调用接口。

  3. 如果用户已拒绝授权,则不会出现弹窗,而是直接进入接口fail回调。

    export default {
    pages: [
      'pages/index/index',
    ],
    permission: {
      "scope.userLocation": {
        "desc": "是否允许获取你当前的地理位置信息?"
      }
    },
    }
    
    复制代码

    效果:

2.获取用户位置经纬度

api介绍:

  • wx.getSetting(): 获取用户当前的授权状态

  • wx.getLocation(): 获取当前的地理位置、速度。当用户离开小程序后,此接口无法调用。

    // 判断用户当前授权状态
    getCurrentLocation = () => {
       const vm = this;
       // 判断用户是否授权获取地理位置
       wx.getSetting({
         success: (res) => {
           // res.authSetting['scope.userLocation'] == undefined    表示 初始化进入该页面
           // res.authSetting['scope.userLocation'] == false    表示 非初始化进入该页面,且未授权
           // res.authSetting['scope.userLocation'] == true    表示 地理位置授权
           if (
             res.authSetting["scope.userLocation"] != undefined &&
             res.authSetting["scope.userLocation"] == false
           ) {
             // 非第一次进入页面且未授权,可根据需求在此处做操作
             
           } else {
            // 获取用户位置经纬度
             vm.getLocation();
           }
         },
       })
     }
     // 获取用户位置
     getLocation() {
       const that = this;
       wx.getLocation({
         type: "gcj02",
         success(res) {
         // res包含用户位置经纬度、speed等
           const latitude = res.latitude;
           const longitude = res.longitude;
           that.setState({
             latitude,
             longitude,
           });
         },
         fail(res) {
           // 用户未给定位权限,打开城市选择器
           // 实践中发现安卓和苹果此处错误信息不同
           if (
             res.errMsg == "getLocation:fail auth deny" ||
             res.errMsg == "getLocation:fail:auth denied"
           ) {
              that.setState({
               areaOpened: true,
             });
           }
         },
       });
     }
    复制代码

    3.将获取经纬度信息解析为具体城市地址

    借助腾讯地图逆地址解析接口,申请一个腾讯地图的key,传入经纬度即可。

    var accessKey = 'xxxxx自己申请一个腾讯地图的key'
    var qqMapApi =
             "https://apis.map.qq.com/ws/geocoder/v1/" +
             "?location=" +
             latitude +
             "," +
             longitude +
             "&key=" +
             accessKey +
             "&get_poi=1";
    wx.request({
         url: qqMapApi,
         header: {
           "Content-Type": "application/json",
         },
         data: {},
         method: "GET",
         success: (res) => {
           if (res.statusCode == 200 && res.data.status == 0) {
             // 从返回值中提取需要的业务地理信息数据 国家、省、市、县区、街
             that.setAddress(res.data.result.address_component);
           }
         },
         fail: () => {
           wx.showToast({
             title: "地址解析失败",
             icon: "none",
           })
         },
       })
    复制代码

    4.用户选择城市时需要将城市解析为经纬度

    借助腾讯地图地址解析接口

    var accessKey = 'xxxxx自己申请一个腾讯地图的key'
    var qqMapApi =
          "https://apis.map.qq.com/ws/geocoder/v1/?address=" +
          provinceName +
          cityName +
          countyName +
          "&key=" +
          accessKey;
    wx.request({
        url: qqMapApi,
        header: {
          "Content-Type": "application/json",
        },
        data: {},
        method: "GET",
        success: (res) => {
          if (res.statusCode == 200 && res.data.status == 0) {
            that.setState({
              longitude: res.data.result.location.lng,
              latitude: res.data.result.location.lat,
            });
          }
        },
        fail: (res) => {
          wx.hideToast();
          wx.showToast({
            title: "地址解析失败",
            icon: "none",
          });
        },
      });
    复制代码

    5.用户拒绝授权后,手动打开设置授权界面

    用户可以在小程序设置界面(「右上角」 - 「关于」 - 「右上角」 - 「设置」)中控制对该小程序的授权状态。

    开发者可以调用 wx.openSetting 打开设置界面,引导用户开启授权。

    wx.openSetting({
        success(res) {
          if (res.authSetting["scope.userLocation"]) {
            // 已授权
          } else {
            // 未授权
          }
        },
      });
    复制代码

    调用后可打开:


作者:元气少女阿宅
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏