android 签到打卡View 打卡签到位置神器

一、在页面中引入地图组件

<map id="map" style="width: 100%; height: 100%" :latitude="myLatitude" :longitude="myLongitude" :circles="circles" :markers="markers"> </map>

属性名	类型	说明
longitude	Number	中心经度
latitude	Number	中心纬度
markers	Array	标记点
circles	Array	圆

1、显示地图中的圆形标识

通过配置表格中的circles就能实现地图上的圆形标识

// 地图上圆形区域标识
const circles = ref([
  {
    latitude: '',
    longitude: '',
    color: '#69BFBE6A',
    fillColor: '#69BFBE6A',
    radius: 100,
    strokeWidth: 2,
  },
])属性说明类型必填备注latitude纬度Number是浮点数，范围 -90 ~ 90longitude经度Number是浮点数，范围 -180 ~ 180color描边的颜色String否8位十六进制表示，后两位表示alpha值，如：#000000AA；#00000为十六进制fillColor填充颜色String否8位十六进制表示，后两位表示alpha值，如：#000000AA；#00000为十六进制radius半径Number是strokeWidth描边的宽度Number否level压盖关系，默认为 abovelabelsStringfalse微信小程序

1、在地图中添加标记点，气泡提示框

配置markers展示标记点以及提示气泡

// 地图上气泡提示const markers: any = ref([
  {
    id: 1,
    latitude: '',
    longitude: '',
    width: 10,
    height: 17,
    // iconPath: 'https://dianliu.oss-cn-hangzhou.aliyuncs.com/static/map/company.png',
    callout: {
        content: '已进入打卡范围',
        color: '#FFFFFF',
        fontSize: 12,
        borderColor: '#69BFBE',
        bgColor: '#69BFBE',
        padding: 5,
        borderRadius: 3,
        display: 'ALWAYS',
        textAlign: 'center',
      }
  },
])属性说明类型必填备注id标记点idNumber是marker点击事件回调会返回此id。建议为每个marker设置上Number类型id，保证更新marker时有更好的性能。最大限制9位数latitude纬度Number是浮点数，范围 -90 ~ 90longitude经度Number是浮点数，范围 -180 ~ 180title标注点名String否点击时显示，callout存在时将被忽略iconPath显示的图标String是项目目录下的图片路径，支持相对路径写法，以'/'开头则表示相对小程序根目录；也支持临时路径width标注图标宽度Number否默认为图片实际宽度height标注图标高度Number否默认为图片实际高度callout自定义标记点上方的气泡窗口Object否支持的属性见下表，可识别换行符。

二、小程序获取定位信息

可以通过小程序提供的方法获取到当前的定位

const getLocation = () => {
  uni.showLoading({
    title: '定位中...',
    mask: true,
  })
  return new Promise((resolve, reject) => {
     const _locationChangeFn = (res: any) => {
         console.log('location change', res)
         uni.hideLoading()
         wx.offLocationChange(_locationChangeFn)
     }
     wx.startLocationUpdate({
         success: (res: any) => {
             wx.onLocationChange(_locationChangeFn)
             resolve(res)
         },
         fail: (err: any) => {
             reject()
         },
     })
  })
}

 这个方法也可以获取到定位信息，但是不能频繁的获取

uni.getLocation({
   type: 'wgs84',
   altitude: true,
   success: function (res) {
      // res  获取到的定位信息
   },
 })
在手机上进行测试时可能会无法定位，这是我们就需要在manifest.json文件配置下图中红框中的内容

三、打卡签到

此时我们拿到了自己所在位置经纬度以及签到地经纬度可以通过计算得到两点之间的距离，再通过与我们地图圆形区域半径进行比较，便可以判断用户是否进入打卡区域。

计算方法

// 格式化经纬度
const rad = (d: any) => {
  return (d * Math.PI) / 180.0
}
// 计算距离
const getDistance = (point1: any[], point2: any[]) => {
  let [x1, y1] = point1
  let [x2, y2] = point2
  let Lat1 = rad(x1) // 纬度
  let Lat2 = rad(x2)
  let a = Lat1 - Lat2 //	两点纬度之差
  let b = rad(y1) - rad(y2) //	经度之差
  let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(Lat1) * Math.cos(Lat2) * Math.pow(Math.sin(b / 2), 2)))
  //	计算两点距离的公式
  s = s * 6378137.0 //	弧长等于弧度乘地球半径（半径为米）
  s = Math.round(s * 10000) / 10000 //	精确距离的数值
  console.log(s)

  distance.value = s
}