一、在页面中引入地图组件
<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 ~ 90 |
| longitude | 经度 | Number | 是 | 浮点数，范围 -180 ~ 180 |
| color | 描边的颜色 | String | 否 | 8位十六进制表示，后两位表示alpha值，如：#000000AA；#00000为十六进制 |
| fillColor | 填充颜色 | String | 否 | 8位十六进制表示，后两位表示alpha值，如：#000000AA；#00000为十六进制 |
| radius | 半径 | Number | 是 | |
| strokeWidth | 描边的宽度 | Number | 否 | |
| level | 压盖关系，默认为 abovelabels | String | false | 微信小程序 |
2、在地图中添加标记点，气泡提示框
配置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',
}
},
])
| 属性 | 说明 | 类型 | 必填 | 备注 |
|---|---|---|---|---|
| latitude | 纬度 | Number | 是 | 浮点数，范围 -90 ~ 90 |
| longitude | 经度 | Number | 是 | 浮点数，范围 -180 ~ 180 |
| id | 标记点id | Number | 是 | marker点击事件回调会返回此id。建议为每个marker设置上Number类型id，保证更新marker时有更好的性能。最大限制9位数 |
| title | 标注点名 | String | 否 | 点击时显示，callout存在时将被忽略 |
| iconPath | 显示的图标 | String | 是 | 项目目录下的图片路径，支持相对路径写法，以’/'开头则表示相对小程序根目录；也支持临时路径 |
| width | 标注图标宽度 | Number | 否 | 默认为图片实际宽度 |
| height | 标注图标高度 | Number | 否 | 默认为图片实际高度 |
| callout | 自定义标记点上方的气泡窗口 | Object | 否 | 支持的属性见下表，可识别换行符。 |
二、小程序获取定位信息
可以通过小程序提供的方法获取到当前的定位
官方链接：https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.startLocationUpdateBackground.html
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 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
}
原文链接：https://blog.csdn.net/qq_57399113/article/details/127588698
