更新记录
1.0.0(2024-10-30)
下载此版本
发布
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.8.10 app-vue |
× |
× |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
× |
× |
× |
× |
× |
× |
高德地图定位打卡
示例说明
默认 (展示地图,是否可以打卡)
<template>
<view class="container">
<map-positioning-punch
:clock-in-area="clockInArea"
:refresh-timeout="refreshTimeout"
@clockInClick="clockIn"
:is-report="true"
@change="locationChange"
>
</map-positioning-punch>
</view>
</template>
<script>
/**
* 作者:腾辉工作室
* 邮箱:844475003@qq.com
*/
export default {
data() {
return {
// 打卡区域设置
clockInArea: [
{
longitude: '111.455906',
latitude: '27.257652',
distance: 150,
},
{
longitude: '111.45304',
latitude: '27.256399',
distance: 400,
},
{
longitude: '111.447355',
latitude: '27.258016',
distance: 300,
}
],
// 刷新打卡区域频率
refreshTimeout: 3000
}
},
methods: {
// 位置变化
locationChange({ location, areaLocation, distance }) {
uni.showToast({
icon: 'success',
title: '上报成功'
})
// location 当前位置
// areaLocation 符合打卡的区域
// distance 打卡距离
console.log(11, location, areaLocation, distance)
},
// 打卡回调事件
clockIn({ location, areaLocation, distance }) {
uni.showToast({
icon: 'success',
title: '打卡成功'
})
// location 当前位置
// areaLocation 符合打卡的区域
// distance 打卡距离
console.log(location, areaLocation, distance)
}
}
}
</script>
参数
参数名 |
描述 |
clockInArea |
打卡区域设置 Array<经纬度信息、半径> |
refreshTimeout |
打卡定位刷新频率 Number,默认:3000 |
clockIn |
打卡数据回调 Function 返回 location-当前位置, areaLocation-符合打卡区域信息, distance - 打卡位置距离打卡区域距离(m) |
isPort |
是否上报实时位置数据 |
change |
上报数据返回,同打卡回调一致 |
自定义打卡按钮
<map-positioning-punch
:clock-in-area="clockInArea"
:refresh-timeout="refreshTimeout"
:is-report="true"
@change="locationChange"
>
<view>自定义打卡按钮</view>
</map-positioning-punch>
manifest.json App模块配置
高德地图开放平台
高德地图开放平台
获取用户名
个人中心
申请安卓、IOS应用
获取发布版安全码SHA1
uni-app开发者中心