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}`);
    });
}
相关推荐
No Silver Bullet1 小时前
HarmonyOS NEXT开发进阶(十四):HarmonyOS应用开发者基础认证试题集汇总及答案解析
华为·harmonyos
鸿蒙布道师11 小时前
鸿蒙NEXT开发Base64工具类(ArkTs)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
The 旺12 小时前
《HarmonyOS Next开发实战:从零构建响应式Todo应用的基石》
华为·harmonyos
Industio_触觉智能13 小时前
鸿蒙北向开发OpenHarmony5.0 DevEco Studio开发工具安装与配置
harmonyos·鸿蒙系统·openharmony·开源鸿蒙·鸿蒙开发·嵌入式开发板
秋叶先生_17 小时前
HarmonyOS NEXT——【鸿蒙监听网络状态变化】
华为·harmonyos·鸿蒙
东林知识库18 小时前
鸿蒙NEXT小游戏开发:围住神经猫
harmonyos
zacksleo18 小时前
鸿蒙Flutter开发故事:不,你不需要鸿蒙化
flutter·harmonyos
别说我什么都不会20 小时前
OpenHarmony解读之设备认证:sts协议-客户端发起sts end请求
物联网·嵌入式·harmonyos
悬空八只脚1 天前
React-Native开发鸿蒙NEXT-本地与沙盒加载bundle
harmonyos
鸿蒙布道师1 天前
鸿蒙NEXT开发日志工具类(ArkTs)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei