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

本人花费半年的时间总结的《Java面试指南》已拿腾讯等大厂offer,已开源在github ,欢迎star!

转载声明:转载请注明出处,本技术博客是本人原创文章

本文GitHub https://github.com/OUYANGSIHAI/JavaInterview 已收录,这是我花了6个月总结的一线大厂Java面试总结,本人已拿大厂offer,欢迎star

原文链接:blog.ouyangsihai.cn >> 微信小程序爬坑记之–获取位置

微信小程序快一个月没碰了,今天受一个老哥的启发,决定继续顺爬坑。我们经常遇到这样的情景,比如定外卖或者使用地图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 表示换行

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

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

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

原文始发于微信公众号(枪在手):

本人花费半年的时间总结的《Java面试指南》已拿腾讯等大厂offer,已开源在github ,欢迎star!

转载声明:转载请注明出处,本技术博客是本人原创文章

本文GitHub https://github.com/OUYANGSIHAI/JavaInterview 已收录,这是我花了6个月总结的一线大厂Java面试总结,本人已拿大厂offer,欢迎star

原文链接:blog.ouyangsihai.cn >> 微信小程序爬坑记之–获取位置


 上一篇
微信小程序爬坑记之–上划加载更多 微信小程序爬坑记之–上划加载更多
今天继续爬坑,做一下上划加载更过数据的功能,我们浏览网页时,加载更过数据一般有两种方式,一种是点击按钮,实现加载,一种是屏幕上划实现加载。前者容易实现,今天来说下后者。 提示:点击阅读原文,浏览效果更佳喔。 实现页面上划加载下一页数据。先看
2021-04-06
下一篇 
GitHub私有仓库都免费了,你还没有账号? GitHub私有仓库都免费了,你还没有账号?
var audio1 = new BeePlayer({element: document.getElementById("audio-1"),music:{title: "Blues Is My Waili
2021-04-06