Harmonyos5应用开发实战——地图组件集成与定位功能实现(part2)

3. 获取当前位置

getLocation方法用于获取用户的当前位置,并将位置信息设置到地图控制器中。

typescript 复制代码
getLocation(mapController?: map.MapComponentController): Promise<geoLocationManager.Location> {
  let promise = geoLocationManager.getCurrentLocation();
  console.info('getCurrentLocation' + JSON.stringify(promise));
  promise.then(async (location: geoLocationManager.Location) => {
    mapController?.setMyLocation(location);
    console.info('getCurrentLocation' + JSON.stringify(location));
    return location;
  }).catch((error: Error) => {
    console.error('getCurrentLocation failed', 'getCurrentLocation error: ' + JSON.stringify(error));
  });
  return promise;
}
4. 跳转到花瓣地图导航

goPetalMap方法用于创建一个Want对象,指定花瓣地图的包名和URI,并传递目的地的经纬度和名称等信息,然后启动花瓣地图应用进行导航。

typescript 复制代码
goPetalMap() {
  let petalMapWant: Want = {
    bundleName: 'com.huawei.hmos.maps.app',
    uri: 'maps://routes',
    parameters: {
      linkSource: AppStorage.get('packageName') as string,
      destinationLatitude: this.latitude,
      destinationLongitude: this.longitude,
      destinationPoiId: '',
      destinationName: this.storeInfo?.address ?? '',
    },
  }

  let context = getContext(this) as common.UIAbilityContext;
  context.startAbility(petalMapWant);
}
5. 界面布局

build方法中,使用NavDestinationStackRelativeContainer等组件进行界面布局,展示地图组件、返回按钮、定位按钮、店铺信息和导航按钮等。

typescript 复制代码
build() {
  NavDestination() {
    Stack({ alignContent: Alignment.BottomStart }) {
      RelativeContainer() {
        MapComponent({ mapOptions: this.mapOption, mapCallback: this.callback })
        Row() {
          Row() {
            Image($r('app.media.back')).width(24).height(24)
          }
          .width(40)
          .height(40)
          .backgroundColor('#0C000000')
          .padding(8)
          .borderRadius(1000)
          .margin({ left: 13 })
          .onClick(() => {
            this.pageStack.pop()
          })

        }
        .width(Constants.FULL_SIZE)
        .margin({ top: this.windowTopHeight })
        .constraintSize({ maxWidth: Constants.FULL_SIZE })
        .padding({ bottom: 10, top: 16 })
        .justifyContent(FlexAlign.Start)
        .alignRules({
          'top': { 'anchor': '__container__', 'align': VerticalAlign.Top },
          'left': { 'anchor': '__container__', 'align': HorizontalAlign.Start },
          'right': { 'anchor': '__container__', 'align': HorizontalAlign.End },
        })


        Image($r('app.media.my_location'))
          .width(32)
          .height(32)
          .borderRadius(8)
          .margin({ bottom: 24, right: 16 })
          .alignRules({
            'bottom': { 'anchor': 'bottomCol', 'align': VerticalAlign.Top },
            'right': { 'anchor': '__container__', 'align': HorizontalAlign.End },
          })
          .onClick(() => {
            if (this.myLocation) {
              this.mapController?.animateCamera(map.newLatLng({
                latitude: this.myLocation?.latitude,
                longitude: this.myLocation?.longitude,
              }, 15), 200);
            }
          })
        Column() {
          Row() {
            Row() {
              Image(`${CommonUrl.CLOUD_STORAGE_URL}${this.storeInfo?.logo}`).width(40).height(40).borderRadius(8)
              Column() {
                Text(this.storeInfo?.name)
                  .fontSize($r('sys.float.Body_L'))
                  .fontWeight(FontWeight.Medium)
                  .fontColor($r('sys.color.font_primary'))
                  .maxLines(1)
                  .textOverflow({ overflow: TextOverflow.Ellipsis })
                Text(this.storeInfo?.address)
                  .fontSize($r('sys.float.Body_S'))
                  .fontColor($r('sys.color.font_secondary'))
                  .margin({ top: 2 })
                  .maxLines(2)
                  .textOverflow({ overflow: TextOverflow.Ellipsis })
              }.alignItems(HorizontalAlign.Start).margin({ left: 8 }).layoutWeight(1)
            }.layoutWeight(1)

            Image($r('app.media.navigation')).width(40).onClick(() => {
              this.goPetalMap()
            })
          }
          .width(Constants.FULL_SIZE)
          .justifyContent(FlexAlign.SpaceBetween)

        }
        .width(Constants.FULL_SIZE)
        .borderRadius({ topLeft: 20, topRight: 20 })
        .backgroundColor($r('sys.color.comp_background_list_card'))
        .padding({
          top: 30,
          left: 24,
          right: 24,
          bottom: 30,
        })
        .alignRules({
          'bottom': { 'anchor': '__container__', 'align': VerticalAlign.Bottom },
          'left': { 'anchor': '__container__', 'align': HorizontalAlign.Start },
          'right': { 'anchor': '__container__', 'align': HorizontalAlign.End },
        })
        .id('bottomCol')
      }.height(Constants.FULL_SIZE)

    }
  }.hideTitleBar(true)

}

通过以上步骤,在HarmonyOS 5应用中成功集成了地图组件,实现了定位功能和跳转到花瓣地图导航的功能。

相关推荐
爱笑的眼睛118 小时前
08-自然壁纸实战教程-视频列表-云
华为·harmonyos
Georgewu14 小时前
【HarmonyOS 5】鸿蒙中自定义弹框OpenCustomDialog、CustomDialog与DialogHub的区别详解
harmonyos
塞尔维亚大汉14 小时前
鸿蒙内核源码分析(消息封装篇) | 剖析LiteIpc 进程通讯内容
harmonyos·源码阅读
Georgewu15 小时前
【HarmonyOS NEXT】鸿蒙跳转华为应用市场目标APP下载页
harmonyos
ajassi200017 小时前
开源 Arkts 鸿蒙应用 开发(六)数据持久--文件和首选项存储
linux·开源·harmonyos
塞尔维亚大汉17 小时前
鸿蒙内核源码分析(共享内存) | 进程间最快通讯方式
harmonyos·源码阅读
生如夏花℡21 小时前
HarmonyOS学习记录4
学习·华为·harmonyos
xq952721 小时前
编程之路2025年中总结,勇往直前 再战江湖
harmonyos
枫叶丹41 天前
【HarmonyOS Next之旅】DevEco Studio使用指南(四十二) -> 动态修改编译配置
华为·harmonyos·deveco studio·harmonyos next
前端世界1 天前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos