当前位置：首页 > news >正文

uni-app插件，高德地图、地图区域绘制、定位打卡

news 来源：原创 2025/6/17 11:19:54

介绍

高德地图、地图区域绘制、定位打卡

示例

默认（展示地图，是否可以打卡）

<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模块配置