WeChat 애플릿 예: 현재 도시 위치를 획득하고 지리적 위치를 재승인하기 위한 코드 구현-미니 프로그램 개발-php.cn

WeChat 애플릿 예: 현재 도시 위치를 획득하고 지리적 위치를 재승인하기 위한 코드 구현

不言

풀어 주다： 2018-08-10 14:26:17

원래의

22744명이 탐색했습니다.

이 기사의 내용은 WeChat 애플릿 예제에 관한 것입니다. 현재 도시 위치를 획득하고 지리적 위치를 재인증하는 코드 구현입니다. 필요한 친구가 참고할 수 있기를 바랍니다. 당신에게.

1 현재 지리적 위치를 얻으려면 wx.getLocation 인터페이스를 사용하여 경도, 위도, 속도 및 기타 정보를 반환할 수 있습니다.

참고---기본 작동 메커니즘:

첫 번째 페이지를 입력하세요. 시간이 지나면 API를 호출하고 사용자 인증 결과를 반환하고 결과를 유지합니다. 사용자가 미니 프로그램을 삭제하거나 승인 상태를 변경하지 않는 한, 사용자가 페이지에 다시 들어가면 승인 결과는 변경되지 않고 API가 다시 호출되지 않습니다.

삭제하지 않고 계속해서 승인 요청을 다시 시작합니다. 미니 프로그램에는 wx.openSetting이 필요합니다.

따라서 첫 번째 단계는 사용자의 승인을 얻는 것입니다.

2. 두 번째 단계는 wx.getLocation 인터페이스를 통해 경도, 위도, 속도 및 기타 정보를 반환하는 것입니다.

3. 경도와 위도를 지리로 변환 위치의 경우 Tencent 위치 서비스의 WeChat 애플릿용 지리 변환 JS SDK의 API나 Baidu API(제가 사용하는 Baidu API)를 사용할 수 있습니다

사용자가 처음 페이지에 들어갈 때 (지리적 위치 인증이 필요함) 페이지에서 onShow를 수행합니다. wx.getLocation을 호출하여 나중에 페이지에 들어갈 때마다 특정 사용자 인증 정보가 wx.getSetting 인터페이스를 통해 반환됩니다.

코드는 다음과 같습니다.

onShow: function () {
    var _this = this;
    //调用定位方法
    _this.getUserLocation();
  },
//定位方法
getUserLocation: function () {
    var _this = this;
    wx.getSetting({
      success: (res) => {
        // res.authSetting[&#39;scope.userLocation&#39;] == undefined    表示 初始化进入该页面
        // res.authSetting[&#39;scope.userLocation&#39;] == false    表示 非初始化进入该页面,且未授权
        // res.authSetting[&#39;scope.userLocation&#39;] == true    表示 地理位置授权
        if (res.authSetting[&#39;scope.userLocation&#39;] != undefined && res.authSetting[&#39;scope.userLocation&#39;] != true) {
          //未授权
          wx.showModal({
            title: &#39;请求授权当前位置&#39;,
            content: &#39;需要获取您的地理位置，请确认授权&#39;,
            success: function (res) {
              if (res.cancel) {
                //取消授权
                wx.showToast({
                  title: &#39;拒绝授权&#39;,
                  icon: &#39;none&#39;,
                  duration: 1000
                })
              } else if (res.confirm) {
                //确定授权，通过wx.openSetting发起授权请求
                wx.openSetting({
                  success: function (res) {
                    if (res.authSetting["scope.userLocation"] == true) {
                      wx.showToast({
                        title: &#39;授权成功&#39;,
                        icon: &#39;success&#39;,
                        duration: 1000
                      })
                      //再次授权，调用wx.getLocation的API
                      _this.geo();
                    } else {
                      wx.showToast({
                        title: &#39;授权失败&#39;,
                        icon: &#39;none&#39;,
                        duration: 1000
                      })
                    }
                  }
                })
              }
            }
          })
        } else if (res.authSetting[&#39;scope.userLocation&#39;] == undefined) {
         //用户首次进入页面,调用wx.getLocation的API
          _this.geo();
        }
        else {
          console.log(&#39;授权成功&#39;)
          //调用wx.getLocation的API
          _this.geo();
        }
      }
    })

  },         

// 获取定位城市
  geo: function () {
    var _this = this;
    wx.getLocation({
      type: &#39;wgs84&#39;,
      success: function (res) {
        var latitude = res.latitude
        var longitude = res.longitude
        var speed = res.speed
        var accuracy = res.accuracy
        wx.request({
          url: &#39;http://api.map.baidu.com/geocoder/v2/?ak=xxxxxxxxxxxx&location=&#39; + res.latitude + &#39;,&#39; + res.longitude + &#39;&output=json&#39;,
          data: {},
          header: { &#39;Content-Type&#39;: &#39;application/json&#39; },
          success: function (ops) {
            console.log(&#39;定位城市：&#39;, ops.data.result.addressComponent.city)
          },
          fail: function (resq) {
            wx.showModal({
              title: &#39;信息提示&#39;,
              content: &#39;请求失败&#39;,
              showCancel: false,
              confirmColor: &#39;#f37938&#39;
            });
          },
          complete: function () {
          }
        })
      }
    })
  },

로그인 후 복사

렌더링: 페이지에 처음 진입한 후

인증 거부 후 해당 페이지에 다시 들어가거나 페이지에서 버튼(위치 가져오기)을 클릭하여 바인딩합니다. JS

위 두 팝업은 상자의 구조가 동일합니다. 전자는 wx.getLocation 인터페이스에서 제공하는 스타일을 사용하고 후자는 wx.showModel 인터페이스에서 제공하는 스타일을 사용합니다.

인증 원칙에 대해 간단히 이야기해 보겠습니다. onshow는 처음 페이지에 들어갈 때 wx.getLocation을 호출하여 사용자가 거부한 후 사용자에게 인증을 요청하고, 다시 페이지에 들어가면 다음을 통해 사용자 인증 상태를 반환합니다. wx.getSetting 인터페이스.

res.authSetting['scope.userLocation'] 값을 true와 비교하여 true이면 인증이 허용되고, false이면 인증이 거부됩니다.