Harmonyos5应用开发实战——地图组件集成与定位功能实现（part1）

Harmonyos5应用开发实战------地图组件集成与定位功能实现

文章内容概要

本文聚焦于HarmonyOS 5应用开发中地图组件集成与定位功能的实现。详细介绍了如何在应用中集成地图组件，获取用户定位权限，展示商家位置，并实现跳转到花瓣地图导航的功能。

核心功能介绍

1. 组件状态与属性初始化

在组件中定义了多个状态变量，用于存储地图相关信息，如经纬度、店铺信息、地图控制器等，并设置了地图的样式。

typescript 复制代码

@Component
export struct HwMap {
  @Consume('pageStack') pageStack: NavPathStack
  @State windowTopHeight: number = AppStorage.get('windowTopHeight') as number || 38.77
  @State latitude: number = 0
  @State longitude: number = 0
  @State storeInfo?: StoreInfo = undefined
  @State mapController?: map.MapComponentController | undefined = undefined;
  @State myLocation: geoLocationManager.Location | undefined = undefined;
  @State isShowMyLocation: boolean = false;
  private marker?: map.Marker;
  private mapOption?: mapCommon.MapOptions;
  private callback?: AsyncCallback<map.MapComponentController>;
  private style: mapCommon.MyLocationStyle = {
    anchorU: 0.5,
    anchorV: 0.5,
    radiusFillColor: 0xff00FFFFFF,
    displayType: mapCommon.MyLocationDisplayType.FOLLOW,
  };
}

2. 参数获取与权限请求

在组件即将显示时，通过getParams方法获取路由参数，得到店铺的经纬度和信息。同时，使用initPermission方法请求定位权限，若用户授权成功，则获取用户当前位置并在地图上显示。

typescript 复制代码

aboutToAppear(): void {
  this.getParams()
  this.initPermission()
  this.mapOption = {
    position: {
      target: {
        latitude: this.latitude,
        longitude: this.longitude,
      },
      zoom: 15,
    },
  };

  this.callback = async (err, mapController) => {
    if (!err) {
      this.mapController = mapController;
      this.mapController.on('mapLoad', () => {
        console.info('mapLoad success');
      });
      this.abilityEnabled();
      mapController.setMyLocationStyle(this.style);
      if (this.isShowMyLocation) {
        this.getLocation(this.mapController).then((location: geoLocationManager.Location) => {
          console.info('my location' + JSON.stringify(location));
          this.myLocation = location;
        });
      }
      // Marker初始化参数
      let markerOptions: mapCommon.MarkerOptions = {
        position: {
          latitude: this.latitude,
          longitude: this.longitude,
        },
        rotation: 0,
        visible: true,
        zIndex: 0,
        alpha: 1,
        anchorU: 0.5,
        anchorV: 1,
        clickable: true,
        draggable: true,
        flat: false,
      };
      // 创建Marker
      this.marker = await this.mapController.addMarker(markerOptions);
      await this.marker.setIcon($r('app.media.store_location'));
      this.mapController?.animateCamera(map.newLatLng({
        latitude: this.latitude,
        longitude: this.longitude,
      }, 15), 200);
    }
  };
}

getParams() {
  let paramsArr: HwMapModel[] = this.pageStack.getParamByName('HwMap') as HwMapModel[]
  if (paramsArr.length) {
    let routerParam = paramsArr[paramsArr.length-1]
    this.latitude = routerParam?.latitude ?? 0
    this.longitude = routerParam?.longitude ?? 0
    this.storeInfo = routerParam?.storeInfo ?? undefined
  }
}

initPermission() {
  let atManager: abilityAccessCtrl.AtManager = abilityAccessCtrl.createAtManager();

  atManager.requestPermissionsFromUser(getContext(this) as common.UIAbilityContext,
    ['ohos.permission.LOCATION', 'ohos.permission.APPROXIMATELY_LOCATION'])
    .then((data) => {
      let grantStatus: Array<number> = data.authResults;
      // 用户授权，可以继续访问目标操作
      this.isShowMyLocation = grantStatus.every(item => item === Constants.USER_GRANT_SUCCESS)
      if (this.isShowMyLocation) {
        // 授权成功
        this.getLocation(this.mapController).then((location: geoLocationManager.Location) => {
          console.info('my location' + JSON.stringify(location));
          this.myLocation = location;
          this.mapController?.setMyLocationEnabled(true);
          this.mapController?.setMyLocationControlsEnabled(true);
          this.mapController?.setZoomControlsEnabled(false);
        });
      }

    }).catch((err: BusinessError) => {
      console.error(`Failed to request permissions from user. Code is ${err.code}, message is ${err.message}`);
    });
}