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

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

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

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

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

demo.wxml

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

demo.wxss

"title">使用微信内置地图查看位置
"primary" bindtap="openLoca">查看当前位置

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'
                          });
                        }
                      }
                    });
                  }
                }
              });
            }
          }
        });
    }
  })