更新记录

1.0.1（2025-07-22） 下载此版本

修复web平台地图位置图标不显示问题，新增参数markersIconPath。

1.0.0（2024-10-30） 下载此版本

发布

平台兼容性

uni-app(4.06)

uni-app x(4.75)

高德地图定位打卡

示例说明

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

<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>

参数

自定义打卡按钮

<map-positioning-punch
        :clock-in-area="clockInArea"
        :refresh-timeout="refreshTimeout"
        :is-report="true"
        @change="locationChange"
    >
        <view>自定义打卡按钮</view>
    </map-positioning-punch>

自定义地图位置图标

<map-positioning-punch
        :markers-icon-path="markersIconPath"
    >
        <view>自定义地图位置图标</view>
    </map-positioning-punch>

注意：web平台使用自定义地图位置图标，需要使用本地图片，本地图片路径需要使用绝对路径，例如：/static/img.png，否则地图不显示

manifest.json App模块配置

高德地图开放平台

高德地图开放平台

获取用户名

个人中心

申请安卓、IOS应用

获取发布版安全码SHA1

uni-app开发者中心