HarmonyOS鸿蒙Next中App内如何判断是否安装其他地图类软件？以及跳转

【背景知识】

• Want是一种对象，用于在应用组件之间传递信息。常见的使用场景是作为startAbility()方法的参数。例如，当UIAbilityA需要启动UIAbilityB并向UIAbilityB传递一些数据时，可以使用Want作为一个载体，将数据传递给UIAbilityB。
• 使用canOpenLink判断应用是否可访问，来确定是否安装对应的应用。
• 百度地图路径规划。
• 高德地图路径规划。
• 花瓣地图路径规划。

【解决方案】

• 在entry模块的module.json5文件中配置querySchemes属性：

{
  "module": {
    "querySchemes": [
      "baidumap",
      "amapuri",
      "qqmap",
      "maps"
    ]
  }
}

• 由于每个应用自定义的拉起导航菜单的界面可能是各不相同，因此界面实现不做深究，这里以自定义弹窗为例。创建自定义弹窗，在弹窗里面定义一个数组mapWays用来存放导航的所有跳转方式，然后通过canOpenLink这个API判断百度地图、高德地图、腾讯地图以及系统自带的地图应用是否可用，如果可用就把对应的跳转方式添加到数组mapWays中，示例代码如下：

@State mapWays: Array<string> = []

aboutToAppear(): void {
    if (bundleManager.canOpenLink('baidumap://map/direction')) {
      this.mapWays.push('百度地图')
    }
    if (bundleManager.canOpenLink('amapuri://com.amap.hmapp')) {
      this.mapWays.push('高德地图')
    }
    if (bundleManager.canOpenLink('qqmap://map/routeplan')) {
      this.mapWays.push('腾讯地图')
    }
    if (bundleManager.canOpenLink('maps://navigation')) {
      this.mapWays.push('地图')
    }
  }

• 在需要弹出导航菜单的页面中，首先初始化自定义弹窗，然后构造每种方式的Want对象，最后根据对应的跳转方式使用startAbility实现对应的跳转，示例代码如下：

// 自定义弹窗组件
@CustomDialog
struct SelectMapDialog {
  // 弹窗控制器，用于关闭弹窗
  private controller: CustomDialogController;
  private navApps: Array<string> = [];

  build() {
    Column() {
      // 应用列表
      List() {
        ForEach(this.navApps, (app: string) => {
          ListItem() {
            // 应用名称
            Button(app, { type: ButtonType.Normal })
              .backgroundColor(Color.White)
              .fontColor('#ff5176cb')
              .width('100%')
              .margin({ bottom: 2 })
              .onClick(() => {
                // 用户选择了某个应用
                this.itemClick(app);
                this.controller.close();
              })
          }
        }, (app: string) => app)
      }
      .alignListItem(ListItemAlign.Center)
      .borderRadius(5)
      .width('80%')

      // 取消按钮
      Button('取消', { type: ButtonType.Normal })
        .backgroundColor(Color.White)
        .fontColor('#ff5176cb')
        .width('80%')
        .margin({ top: 20 })
        .borderRadius(5)
        .onClick(() => {
          this.controller.close();
        })
    }
    .width('100%')
    .height(this.navApps.length * 50 + 60) 
    .backgroundColor('#00aaaaaa')
  }

  private itemClick: (app: string) => void = () => {
  };
}

// 地图选择框
selectMapDialog: CustomDialogController = new CustomDialogController({
    builder: SelectMapDialog({
      navApps: this.mapWays,
      itemClick: (item: string) => {
        this.naviMapGuide(item, this.latitude, this.longitude, this.destination)
      }
    }),
    alignment: DialogAlignment.Bottom,
    customStyle: true
  })

// 根据选择的地图，拉起对应的地图app，并且规划路径
naviMapGuide(item: string, latitude: number, longitude: number, destination: string) {
    let baiduWant: Want = {
      uri: `baidumap://map/direction?destination=latlng:${latitude},${longitude},|name:${destination}&mode=driving`
    }
    let qqWant: Want = {
      uri: `qqmap://map/routeplan?type=drive&from=我的位置&to=${destination}&tocoord=${latitude},${longitude}`
    }
    let gaodeWant: Want = {
      uri: `amapuri://route/plan?dlat=${latitude}&dlon=${longitude}&dname=${destination}&t=0sourceApplication=测试应用`
    }
    let petalWant: Want = {
      uri: `https://www.petalmaps.com/navigation/?daddr=${latitude},${longitude}(${destination})&type=drive&utm_source=测试应用`

    }
    if (item === '百度地图') {
      this.context.startAbility(baiduWant)
    } else if (item === '高德地图') {
      this.context.startAbility(gaodeWant)
    } else if (item === '腾讯地图') {
      this.context.startAbility(qqWant)
    } else if (item === '地图') {
      this.context.startAbility(petalWant)
    }
    if (this.selectMapDialog != undefined) {
      this.selectMapDialog.close()
    }
  }