Beispiel für ein WeChat-Applet: Code-Implementierung zum Abrufen des aktuellen Stadtstandorts und zur erneuten Autorisierung des geografischen Standorts

Der Inhalt dieses Artikels befasst sich mit dem WeChat-Applet-Beispiel: Die Code-Implementierung zum Abrufen des aktuellen Stadtstandorts und zur erneuten Autorisierung des geografischen Standorts. Ich hoffe, dass dies der Fall ist hilfreich sein.

1. Um den aktuellen geografischen Standort zu erhalten, können Sie die wx.getLocation-Schnittstelle verwenden, um Längengrad, Breitengrad, Geschwindigkeit und andere Informationen zurückzugeben.

Hinweis: Es funktioniert standardmäßig Mechanismus:

Rufen Sie beim ersten Aufrufen der Seite die API auf, geben Sie das Benutzerautorisierungsergebnis zurück und behalten Sie das Ergebnis bei. Solange der Benutzer das Miniprogramm nicht löscht oder den Autorisierungsstatus ändert, bleibt das Autorisierungsergebnis unverändert und die API wird nicht erneut aufgerufen.

Fahren Sie fort, ohne das zu löschen Miniprogramm. Um eine Autorisierungsanfrage zu initiieren, müssen Sie wx.openSetting verwenden.

Der erste Schritt besteht darin, die Autorisierung des Benutzers wx.openSetting zu erhalten.

2. Der zweite Schritt besteht darin, den Längengrad, den Breitengrad, die Geschwindigkeit und andere Informationen über die wx.getLocation-Schnittstelle zurückzugeben.

3. WeChat konvertiert Längen- und Breitengrade nicht direkt in geografische Standorte. Sie können die API des JS SDK für die geografische Konvertierung des WeChat-Applets in Tencent Location Services oder die Baidu-API (die von mir verwendete Baidu-API) verwenden )

Wenn der Benutzer zum ersten Mal eine Seite betritt (für die eine geografische Standortautorisierung erforderlich ist) und sich die Seite in onShow befindet, wird wx.getLocation aufgerufen, um den Benutzer jedes Mal um Autorisierung zu bitten In Zukunft werden spezifische Benutzerautorisierungsinformationen über die wx.getSetting-Schnittstelle zurückgegeben.

Der Code lautet wie folgt:

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

  },         

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

Rendering: Betreten Sie die Seite zum ersten Mal

Nachher Wenn Sie die Autorisierung ablehnen, rufen Sie die Seite erneut auf Seite oder klicken Sie auf eine Schaltfläche auf der Seite (Standort abrufen), um JS zu binden

Die Struktur der beiden oben genannten Popup-Boxen ist die Das Gleiche gilt, und ersteres verwendet die mitgelieferte wx.getLocation-Schnittstelle Stil, letzteres verwendet den von der wx.showModel-Schnittstelle bereitgestellten Stil.

Lassen Sie uns kurz über das Autorisierungsprinzip sprechen: Wenn Sie die Seite zum ersten Mal betreten, ruft onshow wx.getLocation auf, um den Benutzer um Autorisierung zu bitten, und ruft die Seite erneut auf Autorisierungsstatus über die wx.getSetting-Schnittstelle.

Der Wert von res.authSetting['scope.userLocation'] wird mit true verglichen. Bei true wird die Autorisierung gewährt, bei false wird die Autorisierung verweigert.

Verwandte Empfehlungen:

Implementierung eines Miniprogramms, das setData verwendet, um einen bestimmten Wert in einem Array zu ändern

Implementierung der Auswahl eines Vorschaubilds in Miniprogramm Gleichzeitig kann der Code zum langen Drücken zum Löschen von Bildern realisiert werden

WeChat-Applet – Codefluss für Raspberry Pi-Autosteuerung

Das obige ist der detaillierte Inhalt vonBeispiel für ein WeChat-Applet: Code-Implementierung zum Abrufen des aktuellen Stadtstandorts und zur erneuten Autorisierung des geografischen Standorts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!