港口定位项目开发笔记2·微信小程序端

港口定位项目开发笔记2·微信小程序端

点击按钮获取在地图上查看自己的位置

微信小程序开发中解决位置授权问题

点击按钮获取在地图上查看自己的位置

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
        })
      }
     })
  },

点击查看当前位置即可 #### 微信小程序开发中解决位置授权问题 上篇文章中介绍了如何获取当前位置的代码,但是很多时候用户不会自己打开位置授权,所以我们需要提示用户打开位置授权功能。
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