ポートポジショニングプロジェクト開発ノート2・WeChatミニプログラム

ポートポジショニングプロジェクト開発ノート2・WeChatミニプログラム

ボタンをクリックして、地図上に現在地を表示します

WeChatアプレットの開発におけるロケーション認証の問題を解決します

ボタンをクリックして、地図上に現在地を表示します

demo.wxml

<view class="title">使用微信内置地图查看位置</view>
<button type="primary" bindtap="openLoca">查看当前位置</button>

demo.wxss

<view class="title">使用微信内置地图查看位置</view>
<button type="primary" bindtap="openLoca">查看当前位置</button>

demo.js

openLoca(){
    
    
    wx.getLocation({
    
    
      type: 'gcj02', //返回可以用于wx.openLocation的经纬度
      success (res) {
    
    
        const latitude = res.latitude
        const longitude = res.longitude
        wx.openLocation({
    
    
          latitude,
          longitude,
          scale: 18
        })
      }
     })
  },

クリックして現在地を表示#### WeChatアプリレットの開発における位置認証の問題の解決前回の記事では現在地コードを取得する方法を紹介しましたが、多くの場合、ユーザーは自分で位置認証を開かないため、次のことを行う必要があります。位置認証機能を開くようにユーザーに促します。
wx.getLocation({
    
    
      success: res => {
    
    
        console.log(res);
      },
      fail: e => {
    
    
        console.log(e);
        // 判断用户是否拒绝了授权
        wx.getSetting({
    
    
          success: res => {
    
    
            if (typeof(res.authSetting['scope.userLocation']) != 'undefined' && !res.authSetting['scope.userLocation']) {
    
    
              // 用户拒绝了授权
              wx.showModal({
    
    
                title: '提示',
                content: '您拒绝了定位权限,将无法使用XX功能',
                success: res => {
    
    
                  if (res.confirm) {
    
    
                    // 跳转设置页面
                    wx.openSetting({
    
    
                      success: res => {
    
    
                        if (res.authSetting['scope.userLocation']) {
    
    
                          // 授权成功,重新定位
                          wx.getLocation({
    
    
                            success: res => {
    
    }
                          });
                        } else {
    
    
                          // 没有允许定位权限
                          wx.showToast({
    
    
                            title: '您拒绝了定位权限,将无法使用XX功能',
                            icon: 'none'
                          });
                        }
                      }
                    });
                  }
                }
              });
            }
          }
        });
    }
  })

ここに画像の説明を挿入

おすすめ

転載: blog.csdn.net/zjlwdqca/article/details/112147349