一、在页面中引入地图组件
<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 微信小程序
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 标记点id Number 是 marker点击事件回调会返回此id。建议为每个marker设置上Number类型id,保证更新marker时有更好的性能。最大限制9位数 latitude 纬度 Number 是 浮点数,范围 -90 ~ 90 longitude 经度 Number 是 浮点数,范围 -180 ~ 180 title 标注点名 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 }