介绍
高德地图、地图区域绘制、定位打卡
示例
默认 （展示地图，是否可以打卡）
<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开发者中心
预览
插件地址
