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

介绍

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

示例

默认 (展示地图,是否可以打卡)

复制代码
<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开发者中心

预览

插件地址

相关推荐
不爱说话郭德纲35 分钟前
👩‍💼产品姐一句小优化,让我给上百个列表加上一个动态实时计算高度的方法😿😿
前端·vue.js·性能优化
知识分享小能手40 分钟前
React学习教程,从入门到精通, React教程:构建你的第一个 React 应用(1)
前端·javascript·vue.js·学习·react.js·ajax·前端框架
李剑一41 分钟前
别乱封装,你看出事儿了吧...
前端·vue.js
gongzemin1 小时前
Vue 项目权限管理 路由 按钮权限
前端·vue.js
Flame_1 小时前
一行代码搞定Vue3异步请求:vue3-request让状态管理从地狱到天堂
vue.js
FAIRY_STARS2 小时前
VUE3大屏自适应布局
vue.js
FAIRY_STARS2 小时前
记录uni-app好用的select组件
uni-app
FAIRY_STARS2 小时前
关于uni-app pages.json配置详解
uni-app
GISBox2 小时前
GIS新手入门首选!GISBox中文界面+一键安装,零依赖轻松搞定三维数据发布
vue.js·json·gis
FliPPeDround2 小时前
🚀 定义即路由:definePage宏如何让uni-app路由配置原地起飞?
前端·vue.js·uni-app