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方法中，使用NavDestination、Stack、RelativeContainer等组件进行界面布局，展示地图组件、返回按钮、定位按钮、店铺信息和导航按钮等。

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应用中成功集成了地图组件，实现了定位功能和跳转到花瓣地图导航的功能。