uniapp如何使用高德地图实现打卡功能

在uniapp中如何使用高德地图实现打卡功能？需要获取用户当前位置并记录打卡坐标，最好能显示打卡历史轨迹。求具体实现步骤和关键代码示例，包括高德地图API的配置和权限处理。

2 回复

在uniapp中，使用高德地图实现打卡功能：

  1. 引入高德地图SDK，配置manifest.json
  2. 使用map组件创建地图
  3. 获取用户当前位置（uni.getLocation）
  4. 添加标记点（markers）显示打卡位置
  5. 计算当前位置与打卡点距离
  6. 距离小于阈值时触发打卡成功

核心代码：

// 获取位置
uni.getLocation({
  type: 'gcj02',
  success: (res) => {
    // 计算距离
    let distance = this.getDistance(res.latitude, res.longitude, targetLat, targetLng)
    if(distance < 100) { // 100米内
      console.log('打卡成功')
    }
  }
})

在UniApp中使用高德地图实现打卡功能，可以通过以下步骤实现：

1. 申请高德地图Key

2. 集成高德地图SDK

在UniApp项目中，通过WebView或地图插件引入高德地图：

  • 使用WebView方式：在页面中嵌入WebView，加载高德地图HTML页面。
  • 使用uni-app地图组件：结合<map>组件和高德JS API（需在manifest.json中配置）。

3. 实现定位功能

使用UniApp的uni.getLocation获取用户当前位置，并在地图上标记。

4. 设置打卡点

  • 定义打卡点的经纬度（例如公司位置）。
  • 在地图上添加标记（Marker）表示打卡点。

5. 判断打卡距离

计算用户当前位置与打卡点的距离，若在设定范围内（如100米），则允许打卡。

示例代码

HTML部分（页面结构）

<template>
  <view>
    <map id="myMap" style="width:100%; height:300px;" :latitude="latitude" :longitude="longitude" :markers="markers"></map>
    <button @tap="checkIn">打卡</button>
  </view>
</template>

JavaScript部分（逻辑）

export default {
  data() {
    return {
      latitude: 39.908823, // 默认纬度（例如北京）
      longitude: 116.397470, // 默认经度
      markers: [{
        id: 1,
        latitude: 39.908823,
        longitude: 116.397470,
        title: '打卡点'
      }],
      checkInPoint: { latitude: 39.908823, longitude: 116.397470 }, // 打卡点坐标
      maxDistance: 100 // 最大打卡距离（米）
    }
  },
  onLoad() {
    this.getLocation();
  },
  methods: {
    // 获取用户位置
    getLocation() {
      uni.getLocation({
        type: 'gcj02',
        success: (res) => {
          this.latitude = res.latitude;
          this.longitude = res.longitude;
        },
        fail: (err) => {
          uni.showToast({ title: '获取位置失败', icon: 'none' });
        }
      });
    },
    // 计算两点间距离（Haversine公式）
    calculateDistance(lat1, lon1, lat2, lon2) {
      const R = 6371000; // 地球半径（米）
      const dLat = (lat2 - lat1) * Math.PI / 180;
      const dLon = (lon2 - lon1) * Math.PI / 180;
      const a = Math.sin(dLat/2) * Math.sin(dLat/2) +
                Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
                Math.sin(dLon/2) * Math.sin(dLon/2);
      const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
      return R * c;
    },
    // 打卡功能
    checkIn() {
      uni.getLocation({
        type: 'gcj02',
        success: (res) => {
          const distance = this.calculateDistance(
            res.latitude, res.longitude,
            this.checkInPoint.latitude, this.checkInPoint.longitude
          );
          if (distance <= this.maxDistance) {
            uni.showToast({ title: '打卡成功！', icon: 'success' });
            // 可添加提交打卡记录到服务器的代码
          } else {
            uni.showToast({ title: `距离打卡点${distance.toFixed(0)}米，请靠近后重试`, icon: 'none' });
          }
        },
        fail: () => {
          uni.showToast({ title: '获取位置失败', icon: 'none' });
        }
      });
    }
  }
};

注意事项

  • 权限配置：在manifest.json中申请位置权限（Android需配置GPS权限，iOS需描述位置使用目的）。
  • 坐标系统：高德地图使用GCJ-02坐标系，确保UniApp的getLocation设置type: 'gcj02'。
  • 性能优化：频繁定位可能耗电，建议按需调用。

以上代码实现了基本的打卡功能，可根据需求扩展（如添加打卡记录、多打卡点支持等）。

回到顶部