【代码案例】HarmonyOS NEXT 地图定位打卡案例

// 地图初始化参数，设置地图中心点坐标及层级
mapOptions: mapCommon.MapOptions = {
  position: {
    target: {
      latitude: 39.9,
      longitude: 116.4
    },
    zoom: 14
  }
};

MapComponent({
  mapOptions: this.mapOptions,
  mapCallback: this.mapCallback,
  customInfoWindow: (markerDelegate: map.MarkerDelegate) => {
    this.customInfoWindowBuilder(markerDelegate);
  }
})

/**
 * 判断用户是否在圆圈内。
 * @param {LatLng} pos1 - 用户位置。
 * @param {LatLng} pos2 - 圆心位置。
 * @param {number} radius - 圆半径，单位为米。
 */
isUserInCircle(pos1: mapCommon.LatLng, pos2: mapCommon.LatLng, radius: number) {
  const distance = map.calculateDistance(pos1, pos2);
  this.isInArea = distance <= radius;
}

/**
 * 设置标记信息。
 */
setMarkerInfo() {
  if (this.myPositionWGS84) {
    let reverseGeocodeRequest: geoLocationManager.ReverseGeoCodeRequest = {
      latitude: this.myPositionWGS84.latitude,
      longitude: this.myPositionWGS84.longitude,
      maxItems: 1 // 获取最近的一个地址
    };
    // 将坐标转换为地理描述
    geoLocationManager.getAddressesFromLocation(reverseGeocodeRequest).then((data) => {
      if (this.marker && data[0].placeName) {
        // 显示marker信息窗
        this.marker.setTitle(data[0].placeName);
        this.marker.setInfoWindowVisible(true);
      }
    }).catch((err: BusinessError) => {
      logger.error(TAG, `addresser get failed, error message: ${err.message}, error code: ${err.code}`);
    });
  }
}

/**
 * 添加用户位置监听。
 */
addLocationListener() {
  let requestInfo: geoLocationManager.LocationRequest = {
    priority: geoLocationManager.LocationRequestPriority.ACCURACY,
    scenario: geoLocationManager.LocationRequestScenario.UNSET,
    timeInterval: this.locationTimeInterval,
    distanceInterval: 0,
    maxAccuracy: 0
  };
  let locationChange = (location: geoLocationManager.Location): void => {
    this.myPositionWGS84 = location;
    this.myPositionGCJ02 =
      map.convertCoordinateSync(mapCommon.CoordinateType.WGS84, mapCommon.CoordinateType.GCJ02, location);
    if (this.marker) {
      this.animateMoveMarker(this.marker, this.myPositionGCJ02, this.duration);
    }
    // 位置变动时再次判断用户是否在打卡范围内
    if (this.mapCircleOptions) {
      this.isUserInCircle(this.myPositionGCJ02, this.mapCircleOptions.center, this.mapCircleOptions.radius);
    }
  };
  geoLocationManager.on('locationChange', requestInfo, locationChange);
}

// ClockInModel.ets
/**
 * ClockInController 类用于处理打卡相关的逻辑。
 * 该控制器负责获取当前位置地址等功能。
 */
export class ClockInController {
  /**
   * 获取当前位置地址的方法。
   * @returns {string} 当前位置的地址字符串。
   */
  getAddress: () => string = () => '';
}

// ClockInComponent.ets
/**
 * 获取当前位置地址。
 * @returns {string} 当前位置的地址字符串。
 */
private getAddress = () => {
  if (this.marker) {
    return this.marker.getTitle();
  }
  return '';
}

ClockInComponent({
  clockInController: this.clockInController,
  isInArea: this.isInArea,
  isLocationButtonVisible: this.isLocationButtonVisible,
  locationButtonPosition: this.locationButtonPosition,
  mapOptions: this.mapOptions,
  getMapController: this.getController,
  customInfoWindowSlotParam: this.customInfoWindowSlot
})

// 打卡按钮
Text(this.clockInButtonText)
  .onClick(() => {
    // 如果在打卡范围内，进行打卡操作，否则显示提示信息
    if (this.isInArea) {
      // 如果已有上班打卡信息，则进行下班打卡，否则新增上班打卡信息
      if (this.clockInInfo) {
        // 如果已有下班打卡信息，则更新下班打卡信息，否则新增下班打卡信息
        this.clockOutInfo = {
          time: this.timeFormat.format(new Date()),
          address: this.clockInController.getAddress()
        };
        this.clockInButtonText = this.clockOutInfo !== null ? $r('app.string.clock_in_button_text_update') :
        $r('app.string.clock_in_button_text_clock_out');
      } else {
        this.clockInInfo = {
          time: this.timeFormat.format(new Date()),
          address: this.clockInController.getAddress()
        };
        this.clockInButtonText = $r('app.string.clock_in_button_text_clock_out');
      }
    } else {
      promptAction.showToast({
        message: $r('app.string.clock_in_toast_message_out_of_range')
      });
    }
  })
  // ...

clockin                                  // har类型
|---/src/main/ets/components                       
|   |---ClockInComponent.ets             // 封装的打卡功能组件
|---/src/main/ets/model                        
|   |---ClockInModel.ets                 // 数据模型层-打卡功能组件控制器与打卡信息数据模型 
|---/src/main/ets/utils                        
|   |---Constants.ets                    // 常量数据
|   |---Logger.ets                       // 日志打印工具
|---/src/main/ets/views                        
|   |---ClockInSamplePage.ets            // 视图层-打卡场景主页面