uniapp开发小程序实现考勤打卡，附带源码

2024-05-26 18:19| 来源: 网络整理| 查看: 265

效果图：

考勤打卡三步走：在地图上绘制打卡区域：例图：

附上代码：开始绘制结束绘制生成面生成面重新绘制重新绘制提交绘制提交绘制 export default { data() { return { curLongitude: 113.324520, curLatitude: 23.099994, markers: [], isDrawing: false, points: [], polygons: [{ points: [], strokeWidth: 2, strokeColor: '#ff9d9fdd', fillColor: '#fd0000dd' }], mapContext: null, selectedLocation: null } }, onReady() { this.mapContext = uni.createMapContext('myMap') }, methods: { // 当用户点击地图时触发的事件 onTap onTap(e) { // 判断是否开始绘制 if (this.isDrawing) { console.log(e) // 获取点击地方的经纬度，并且设置一个小图标 const { longitude, latitude } = e.detail const point = { longitude, latitude } this.points.push(point) const marker = { id: this.markers.length + 1, longitude, latitude, iconPath: '../../static/logo.png', width: 20, height: 20 } this.markers.push(marker) } }, // 提交绘制 sumbitPolygon() { uni.showToast({ title: '绘制成功', icon: 'success', duration: 1000 }); // 将所有点都转移到一个一维数组中 let arr = [] this.polygons[0].points.forEach(item => { for (const key in item) { arr.push(item[key]) } }); // 每两个元素合并成一个新数组 const arr2 = arr.map((item, index) => { if (index % 2 === 0) { return [item, arr[index + 1]] } }).filter(item => item !== undefined) // 转为经:纬,经:纬格式的字符串 const str = arr2.map(item => item.join(':')).join(',') console.log(str) }, // 重新绘制 redrawPolygon() { this.markers = [] this.polygons[0].points = [] this.points = [] }, // 开始绘制 startDrawing() { this.isDrawing = true }, // 结束绘制 stopDrawing() { this.isDrawing = false }, // 生成面 createPolygon() { // 将 points 的数组中每个元素的经纬度信息转换为一个新的对象数组 const points = this.points.map(({ longitude, latitude }) => ({ longitude, latitude })) if (points.length >= 3) { const firstPoint = points[0] points[points.length] = firstPoint this.polygons[0].points = points } else { uni.showToast({ icon: 'none', title: '至少需要 3 个点才能生成面' }) } } } } .currentPosition { position: absolute; right: 5%; top: 42%; z-index: 9; border-radius: 50%; background-color: white; width: 90rpx; height: 91rpx; display: flex; align-items: center; justify-content: center; }

获取到用户定位，并跳转到当前用户定位： uniapp开发小程序如何使用地图让用户选择位置，并跳转到相关位置？

getUserLocation() { uni.getLocation({ type: 'gcj02', success: res => { console.log(res.latitude, res.longitude) uni.showToast({ title: '已经来到当前手机定位', duration: 800 }); }, fail: err => { console.error(err); } }); },

执行上述方法小程序会自动跳转到地图搜索页，搜索选择地址后，点击确定然后返回所选地址的经纬度，那如何跳转到所选位置呢？我们进一步完善

data() { return { curLongitude: 113.324520, curLatitude: 23.099994， mapContext: null, } }, onReady() { this.mapContext = uni.createMapContext('myMap') console.log(this.mapContext) } getUserLocation() { uni.getLocation({ type: 'gcj02', success: res => { console.log(res.latitude, res.longitude) this.curLongitude = res.longitude this.curLatitude = res.latitude //this.mapContext.moveToLocation()：调用地图上下文中提供的移动到当前地图中心点位置的方法，让地图自动定位到新的中心点位置 this.mapContext.moveToLocation() uni.showToast({ title: '已经来到当前手机定位', duration: 800 }); }, fail: err => { console.error(err); } }); }, uniapp开发小程序如何获取用户位置，并跳转到当前位置？

data() { return { curLongitude: 113.324520, curLatitude: 23.099994, mapContext: null, selectedLocation: null } }, onReady() { this.mapContext = uni.createMapContext('myMap') console.log(this.mapContext) }, searchLocation() { //uni.chooseLocation()：调用微信内置地图打开位置选择器，允许用户选择位置。 uni.chooseLocation({ success: res => { this.selectedLocation = { longitude: res.longitude, latitude: res.latitude, name: res.name, address: res.address, } console.log(this.selectedLocation) this.curLongitude = this.selectedLocation.longitude this.curLatitude = this.selectedLocation.latitude //this.mapContext.moveToLocation()：调用地图上下文中提供的移动到当前地图中心点位置的方法，让地图自动定位到新的中心点位置 this.mapContext.moveToLocation() uni.showToast({ title: '已经来到' + this.selectedLocation.name, duration: 800 }); }, fail: err => { console.log("已取消") } }) } 报错

如何遇到报错：getLocation:fail fail:require permission desc

这个错误主要是因为小程序在获取地理位置时没有进行权限授权，或者用户拒绝了该权限导致的

在manifest.json中配置如下：

"permission": { "scope.userLocation": { "desc": "获取地理位置用于小程序定位" } }， "requiredPrivateInfos": ["chooseLocation", "getFuzzyLocation"] 完成代码分享

两个功能的完整代码附上：

定位搜索 export default { data() { return { curLongitude: 113.324520, curLatitude: 23.099994, mapContext: null, selectedLocation: null } }, onReady() { this.mapContext = uni.createMapContext('myMap') console.log(this.mapContext) }, methods: { searchLocation() { uni.chooseLocation({ success: res => { this.selectedLocation = { longitude: res.longitude, latitude: res.latitude, name: res.name, address: res.address, } console.log(this.selectedLocation) this.curLongitude = this.selectedLocation.longitude this.curLatitude = this.selectedLocation.latitude this.mapContext.moveToLocation() uni.showToast({ title: '已经来到' + this.selectedLocation.name, duration: 800 }); }, fail: err => { console.log("已取消") } }) }, getUserLocation() { uni.getLocation({ type: 'gcj02', success: res => { console.log(res.latitude, res.longitude) this.curLongitude = res.longitude this.curLatitude = res.latitude this.mapContext.moveToLocation() uni.showToast({ title: '已经来到当前手机定位', duration: 800 }); }, fail: err => { console.error(err); } }); }, } } .currentPosition { position: absolute; right: 5%; top: 42%; z-index: 9; border-radius: 50%; background-color: white; width: 90rpx; height: 91rpx; display: flex; align-items: center; justify-content: center; }

判断用户经纬度是否在绘制图形经纬度范围内：

借助第三方库：turf/helpers

turf/helpers是Turf.js库中的一个模块，用于提供一些辅助函数和工具，以简化地理空间分析和操作。Turf.js是一个流行的JavaScript地理空间分析库，它提供了许多功能强大且易于使用的函数，用于处理地理数据。

首先终端npm安装：turf/helpers，然后引入使用

import { point, polygon } from '@turf/helpers'; const pointCoordinates = [114.1275xxxx, 22.6070xxx]; const polygonCoordinates = [ [114.1251xxx, 22.607911xx1625156], [114.1242869xxx5, 22.607174xx4267], [114.12552648903466, 22.6057xxx6267], [114.1273xx44345, 22.60700xxx4], [114.1251063xx85, 22.6079115xx5156] ]; const pt = point(pointCoordinates); const poly = polygon([polygonCoordinates]); const isInside = booleanPointInPolygon(pt, poly); if (isInside) { this.result = '这个点在这个范围内'; } else { this.result = '这个点不在在这个范围内'; } 扩展：

打卡成功播放一个音乐提示

const innerAudioContext = uni.createInnerAudioContext(); innerAudioContext.autoplay = true; innerAudioContext.src = 'https://img.tukuppt.com/newpreview_music/09/04/05/5c8b001d3f57236050.mp3'; innerAudioContext.onPlay(() => { console.log('开始播放'); });

打卡成功手机震动一下

uni.vibrateLong({ success: function() { console.log('success'); } });

经纬度查询：

【经纬度查询】在线地图经度纬度查询|经纬度地名坐标转换

【本文地址】

公司简介

联系我们