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

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

提示：点击阅读原文，浏览效果更加。

先看一下效果

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

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

!--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}}nnaddress}}/text

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

/**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;
}


.image{
  margin-top: 50rpx;
}

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

Page({
  data: {
    name: '',
    address: '',
    motto: '点我获取位置',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../imgs/imgs'
    })
  },
  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

在指定位置渲染上一步得到的位置数据，这里用插值表达式渲染。如图

其中  n 表示换行

这样我们就获取到了当前位置，并渲染到文本框里，这种场景是不是很熟悉。

微信小程序的爬坑之路还很长，打算写一个小程序的系列文章，随后我也会把基础的知识也写一写，像创建项目，页面配置，路由跳转等等，之前写的一个电影的小项目我也会抽时间写一写。

原文始发于微信公众号（枪在手）：