介紹
高德地圖、地圖區域繪制、定位打卡
示例
默認 （展示地圖，是否可以打卡）
<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開發者中心
預覽
插件地址
