微信小程序地图获取地点信息(打卡签到功能为例)

微信小程序地图获取地点信息(打卡签到功能为例)

2021-08-30 613
下载不了?请联系网站客服提交链接错误!
增值服务:
微信小程序地图获取地点信息(打卡签到功能为例)
最近更新 2021年08月30日
资源编号 105623

微信小程序地图获取地点信息(打卡签到功能为例)

2021-08-30 小程序教程 0 613 百度已收录
限时活动VIP只需20元
增值服务:
¥ 0 钻石 开通VIP尊享优惠特权
立即下载 升级会员
详情介绍

解决方案:利用微信小程序的地图组件获取到用户的地理位置信息(经纬度),再通过腾讯地图 SDK 获取到对应的地理位置(即地名)

效果图

  • 地图已打马赛克

前提步骤

首先需要了解的

  • 微信小程序地图组件

  • 腾讯地图简介(很简短,很重要)

    • (需要小程序负责人去申请,不要用自己账号)跟着教程把 key 申请下来,后文要用
      • 并且要在微信开放平台设置合法域名
    • 我们需要下载 sdk,放在对应文件夹中,去引用它(即 qqmap-wx-jssdk.min.js 文件)

代码部分

配置性代码

app.js 部分关键代码

  • key 需要换成你自己申请的
//app.js
// 引入SDK核心类
var QQMapWX = require(\'/utils/qqmap-wx-jssdk.min.js\')

App({
  globalData: {
    // ..其他全局变量..
    patrolForm: null,
      
    // 实例化API核心类
    qqmapsdk: new QQMapWX({
      key: \'这个key是你申请下来的key\' // 必填
    }),
      
    // ..其他全局变量..
  },
  // 其他代码
})

app.json 部分关键代码(permission那个对象)

{
  \"pages\":[
    \"pages/location_check_in/location_check_in\"
  ],
  \"window\":{
    \"backgroundTextStyle\": \"light\",
    \"navigationBarBackgroundColor\": \"#3db0fc\",
    \"navigationBarTitleText\": \"WeChat\",
    \"navigationBarTextStyle\": \"white\"
  },
  \"style\": \"v2\",
  \"sitemapLocation\": \"sitemap.json\",
  \"permission\": {
    \"scope.userLocation\": {
      \"desc\": \"您的位置信息将用于小程序签到功能\"
    }
  }
}

将 https://apis.map.qq.com 添加到小程序后台-开发-开发设置-服务器域名中

  • 这个操作需要小程序管理员进到后台去配置
  • 我们只需要在开发工具右上角 详情-本地设置 勾上 不校验合法域名…….. 即可继续开发

功能性代码

页面代码:location_check_in.wxml

<!--location_check_in/location_check_in.wxml-->
<view class=\"wholeContinaer\">
	<map id=\"myMap\" markers=\"{{markers}}\" style=\"width:100%;height:100vh;\" longitude=\"{{poi.longitude}}\" latitude=\"{{poi.latitude}}\" scale=\'16\' show-location>
	</map>

	<view class=\"checkInPanel\">
		<!-- <view class=\"checkInBtn\" bindtap=\"checkIn\" style=\"background:url(\'../../images/zcxj/checkInBj.png\') center / contain no-repeat\"> -->
		<view class=\"checkInBtn {{canClick ? \'\' : \'disableClick\'}}\" bindtap=\"checkIn\">
			<view class=\"checkInTitle\">签到</view>
			<view class=\"checkInTime\">{{time}}</view>
		</view>
		<!-- <view class=\"whitePositionPanel\" style=\"background:url(\'../../images/zcxj/jxk.png\') center / contain no-repeat\"> -->
		<view class=\"whitePositionPanel\">
			<view class=\"positonTextRow\">
				<image class=\"positionIcon\" src=\"../../images/zcxj/positionIcon.png\"></image>
				<view class=\"positionFont\">{{addressName}}</view>
			</view>
		</view>
		<view class=\"rePosition\" bindtap=\"rePosition\">
			<image class=\"positionIcon\" src=\"../../images/zcxj/rePosition.png\"></image>
			<view class=\"positionFont\">重新定位</view>
		</view>
	</view>
</view>

样式代码:location_check_in.wxss

/* location_check_in/location_check_in.wxss */
Page{
  background-color: #f2f2f2;
}
.wholeContinaer{
  position: relative;
  height: 100vh;
}

.mapContianer{
  background-color: turquoise;
  width: 100vw;
  height: 100vh;
}

.checkInPanel{
  position: absolute;
  width: 705rpx;
  height: 520rpx;
  bottom: 25rpx;
  left: 25rpx;
  /* background-color: #ffffff; */
}
.checkInBtn{
  width: 280rpx;
  height: 280rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  left: calc(50% - 140rpx);
  z-index: 12;

  border-radius: 50%;
  background-image: linear-gradient(180deg, 
      #00a0e9 0%, 
      #0095e9 73%, 
      #0089e9 100%);
  box-shadow: 0 0 10rpx 0rpx #0089e9;
  /* margin: 0 auto; */
}
.disableClick{
  pointer-events: none;
}
.checkInTitle{
  font-size: 36rpx;
  line-height: 34rpx;
  color: #ffffff;
}
.checkInTime{
  font-size: 24rpx;
  line-height: 34rpx;
  color: #8cd7fe;
  margin-top: 10rpx;
}

.whitePositionPanel{
  width: 100%;
  height: 412rpx;
  position: absolute;
  bottom: 0rpx;

  background-color: #ffffff;
  border-radius: 10rpx;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

.positonTextRow{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 80rpx;
}
.positonTextRow .positionIcon{
  width: 20rpx;
  height: 26rpx;
  margin-right: 10rpx;
}
.positonTextRow .positionFont{
  font-size: 22rpx;
  line-height: 29rpx;
  color: #9c9c9c;
}

.rePosition{
  width: 130rpx;
  height: 35rpx;
  background-color: #ffffff;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 60rpx;
}
.rePosition .positionIcon{
  width: 24rpx;
  height: 24rpx;
  margin-right: 10rpx;
}
.rePosition .positionFont{
  font-size: 18rpx;
  color: #333333;
  line-height: 35rpx;
}

逻辑代码:location_check_in.js

  • 逆地址解析(坐标位置描述)函数官方文档:reverseGeocoder(options:Object)
  • realyCheckIn 函数为业务逻辑代码,此前已经获取到了地理位置,缺少了部分前置业务代码,会导致代码报错,改成你自己的就好
// location_check_in/location_check_in.js
const util = require(\'../../utils/util\')
const app = getApp()
const urlList = require(\"../../utils/api.js\")  // 根据实际项目自己配置

// 实例化API核心类
const qqmapsdk = app.globalData.qqmapsdk

Page({

  /**
   * 页面的初始数据
   */
  data: {
    markers: \'\',
    poi: {
      latitude: \'\',
      longitude: \'\'
    },
    addressName: \'\',
    time: \'\',
    timer: \'\',
    timer2: \'\',  // 用来每个一段时间自动刷新一次定位
    canClick: true
  },
 
  getAddress(e) {
    var that = this;
    qqmapsdk.reverseGeocoder({
      //位置坐标,默认获取当前位置,非必须参数
      /**
       * 
        location: {
          latitude: 39.984060,
          longitude: 116.307520
        },
      */
      // 成功后的回调
      success: function(res) {
        // console.log(res);
        that.setData({
          addressName: res.result.address
        })
        var res = res.result;
        var mks = [];
        //当get_poi为0时或者为不填默认值时,检索目标位置,按需使用
        mks.push({ // 获取返回结果,放到mks数组中
          title: res.address,
          id: 0,
          latitude: res.location.lat,
          longitude: res.location.lng,
          iconPath: \'../../images/zcxj/myPosition.png\', // 图标路径
          width: 21,
          height: 28,
          // callout: { //在markers上展示地址名称,根据需求是否需要
          //   content: res.address,
          //   color: \'#000\',
          //   display: \'ALWAYS\'
          // }
        });
        that.setData({ // 设置markers属性和地图位置poi,将结果在地图展示
          markers: mks,
          poi: {
            latitude: res.location.lat,
            longitude: res.location.lng
          }
        });
      },
      fail: function(error) {
        console.error(error);
      },
      complete: function(res) {
        console.log(res);
      }
    })
  },
  getTime: function () {
    let that = this
    let time = that.data.time
    that.setData({
      timer: setInterval(function () {
        time = util.formatTime(new Date())
        that.setData({
          time: time.substr(-8)
        });
        if (time == 0) {
          // 页面跳转后,要把定时器清空掉,免得浪费性能
          clearInterval(that.data.timer)
        }
      }, 1000)
    })
  },
  rePosition: function () {
    console.log(\'用户点了重新定位\')
    this.getAddress()
  },
  checkIn: function () {
    this.setData({
      canClick: false
    })
    console.log(\'用户点击了签到\')

    
    var that = this
    var nowTime = util.formatTime(new Date())
    wx.showModal({
      title: \'请确认打卡信息\',
      // content: \'请确认待整改项已整改完毕!\',
      content: `地点:${this.data.addressName}\\n时间:${nowTime}`,  // 开发者工具上没有换行,真机调试时会有的
      confirmText: \'确认\',
      success (res) {
        if (res.confirm) {
          console.log(\'用户点击确定\')
          // 调起签到接口
          that.realyCheckIn()
          
        } else if (res.cancel) {
          console.log(\'用户点击取消\')
          that.setData({
            canClick: true
          })
        }
      }
    })
  },
  realyCheckIn: function() {
    var that = this
    var patrolForm = app.globalData.patrolForm  // 其他需要一并提交过去的业务数据

    console.log(app.globalData)
    // debugger
    // 要在这里给 patrolForm 补充其他的参数
    patrolForm.checkaddress = this.data.addressName
    patrolForm.searchtime = util.formatTime(new Date())
    // 应该先判断用户有没有登录,没登录就授权登录
    patrolForm.searchuser = app.globalData.user ? app.globalData.user.UserName : app.globalData.userInfo.nickName
    console.log(\"传给后台的 searchuser:\", patrolForm.searchuser)
    // 拼接:\"经度,纬度\"
    patrolForm.latandlon = this.data.poi.longitude + \",\" + this.data.poi.latitude
    

    console.log(patrolForm)
    console.log(\"↑ 签到提交的post参数\")

    var tmpNumber = 0
    wx.request({
      url: urlList.submitCheckInInfo,
      data: patrolForm,
      method: \"POST\",
      header: {
        \'content-type\': \'application/x-www-form-urlencoded\'
      },
      success: function (res) {
        console.log(res)
        if(res.data.IsSuccess) {
          console.log(res.data.IsSuccess, typeof(res.data.IsSuccess))
          console.log(\"请求成功\")
          var patrolId = res.data.ReturnData[0].id
          // // 看怎么取到返回的id
          // debugger

          if (patrolForm.img_arr1.length > 0) {
            for (var i = 0; i < patrolForm.img_arr1.length; i++){
              tmpNumber = i
              wx.uploadFile({
                // 图片上传的接口地址
                url: urlList.submitCheckInPhoto + \"?patrolid=\" + patrolId,
                filePath: patrolForm.img_arr1[i],
                name: \'content\',
                // formData: {
                //   // 这里面可以携带一些参数一并传过去
                //   patrolId: patrolId
                // },
                // header: {
                //   Authorization: token
                // },
                success: function (res) {
                  console.log(res)
                },
                fail: function (res) {
                  that.setData({
                    canClick: true
                  })
                },
                complete: function () {
                  // 因为上传图片是异步操作,所以会导致这里的 i 会取不到,故需要用个作用域更大点的变量来标识,否则 if 里面的代码不会执行
                  if(tmpNumber === patrolForm.img_arr1.length - 1) {
                    // 有图片就等图片上传完了再返回首页
                    wx.showToast({
                      title: \'巡查签到成功!\',
                      icon: \'success\',
                      duration: 2000,
                      complete: function(){
                        wx.navigateBack({
                          delta: 2  // 回退两层页面
                        })
                      }
                    })
                  }
                }
              })
            }
          } else{
            wx.showToast({
              title: \'巡查签到成功!\',
              icon: \'success\',
              duration: 2000,
              complete: function(){
                wx.navigateBack({
                  delta: 2
                })
              }
            })
          }
        }
      },
      fail: function(res) {
        that.setData({
          canClick: true
        })
      }
    })

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    that.getTime()
    that.getAddress()
    
    that.setData({
      canClick: true, // 允许用户点击,防止多次提交
      timer2: setInterval(function () {
        that.getAddress()
      }, 20000)  // 每20秒刷新一次定位
    })
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    clearInterval(this.data.timer)
    clearInterval(this.data.timer2)
    console.log(\"定时器已被清除\")
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

demo 下载

gitee地址:https://gitee.com/Suwanbin/positionCheckIn

如果对你有帮助,还请帮忙点个 star!


作者:suwanbin
版权:版权归作者所有,商业转载请联系原作者
资源下载此资源仅限注册用户下载,请先

1、本站赞助VIP,仅需【128】元即可 ! ! ! (赞助后永久享受整站资源全部免费下载)
2、站内资源均可通过签到等任务进行免费兑换。(鼓励大家签到)
3、站内资源均来源于网络公开发表文件或网友投稿发布,如侵犯您的权益,请联系管理员处理。
4、本站所分享的源码、模板、软件工具等其他资源,都不包含技术服务,请大家谅解!
5、所有资源均收集于互联网仅供学习、参考和研究,请理解这个概念,所以不能保证每个细节都符合你的需求,也可能存在未知的BUG与瑕疵,因本站资源均为可复制品,所以不支持任何理由的退款兑现(特殊情况可退积分),请熟知后再赞助下载!收取的费用只为能长期与大家分享学习,本站为非商业性网站,纯属个人爱好!

K4资源 小程序教程 微信小程序地图获取地点信息(打卡签到功能为例) https://www.k4sc.com/105623.html

相关文章

评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务