微信小程序爬坑记之--获取位置

前言

微信小程序快一个月没碰了，今天受一个老哥的启发，决定继续顺爬坑。我们经常遇到这样的情景，比如定外卖或者使用地图APP的时候，会让我们选择当前位置，今天的问题是如何获取当前位置。本文通过一个Demo来展示。废话不多讲，来看看吧。

先看一下效果
loading...

需求

来看一下需求，当点击获取按钮时跳转到地图页面，选择当前位置，并把选择的地址返回来呈现在文本框里，如图

先贴下最终代码，随后再详细说明。代码如下

index.wxml

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    <block wx:else>
      <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  
  <!-- 显示当前位置 -->
  <text class="user-location" >{{name}}\n\n{{address}}</text>

  <view class="usermotto">
    <button type="primary" class="user-motto" bindtap="getMyLocation">{{motto}}</button>
  </view>

</view>

index.wxss

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}


.user-location{
  margin-top: 200rpx;
}

.user-location{
  width: 500rpx;
  height: 200rpx;
  line-height: 40rpx;
  margin: 20rpx 0;
  border: 1rpx solid blue;
  background-color: aquamarine;
}

index.js

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    name: '',
    address: '',
    motto: '点我获取位置',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  
  onLoad: function () {
    
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    });

    
  },
  

  // 获取位置
  getMyLocation(){
    wx.getLocation({
      type: 'wgs84',
      success: res => {
        
        wx.chooseLocation({
          success: res => {
            console.log(res);
            this.setData({
              name: res.name,
              address: res.address
            })
          },
        })
      }
    })
  }
  
})

分析

给按钮绑定点击事件

点击按钮跳转，所以首先要给按钮绑定操作事件,如图

这里 getMyLocation 为点击事件；motto是按钮上显示的文字，在 index.js的Page中的data下进行初始化。

打开地图&选择位置

其次是打开地图，我们查找官方文档 点我查看官方文档 可以看到官方提供的有获取位置的API，如图

这里我们会用到下面两个，分别是 wx.getLocation 和 wx.chooseLocation 。
把实例代码复制粘贴到 onLoad 周期函数中，表示程序启动时即获取当前位置，下面重点看下这两个API的实现

其中 wx.getLocation 中的 type: 'wgs84' 表示返回GPS坐标； success 表示接口调用成功的回调函数，这里调用成功后，我们用 wx.chooseLocation 打开地图，选择当前位置，如图

这里我们打印一下 wx.chooseLocation 成功的返回值如图

可以看到返回值里面除了经纬度，还有 name 和 address 两个属性，其对应的值正是我们想要的。

获取当前位置返回值

想拿到这两个值就很简单了，在data中我们先定义了 name 和 address 两个值，默认值为空。现在只需要重新给这两个值赋值即可，如上代码中，this.setData里对 name 和 address 分别赋值。这样获取到当前地理位置了，下一步只需要把这两个值渲染到指定的位置即可。

注意：我这里能直接用 this.setData 是因为前面用的箭头函数，没有this指向的问题，如果你没用剪头函数，需要在函数外部对 this 做重定向，例如 var that = this ; 然后在函数内部就用 that 代替 this