跳到主要内容

通过地图应用实现导航等能力

场景介绍​

从5.0.3(15)开始，支持地图应用首页、搜索地点、查看地点详情、规划路线和进行导航功能；从6.0.1(21)开始，支持地图应用发起打车功能。

本章节将向您介绍如何打开地图应用实现如下能力：

  • 打开地图应用首页
  • 打开地图应用搜索地点
  • 打开地图应用查看地点详情
  • 打开地图应用规划路线
  • 打开地图应用进行导航
  • 打开地图应用发起打车

接口说明​

调用地图应用的功能主要通过petalMaps命名空间下的openMapHomePage、openMapTextSearch、openMapPoiDetail、openMapRoutePlan、openMapNavi、openMapTaxi等接口实现，更多接口及使用方法请参见接口文档。

接口说明描述
TextSearchParams文本搜索的参数。
PoiDetailParamsPOI详情的参数。
RoutePlanParams路线规划的参数。
NaviParams导航的参数。
TaxiParams打车的参数。
openMapHomePage(context: common.Context): Promise<void>打开地图应用首页。
openMapTextSearch(context: common.Context, textSearchParams: TextSearchParams): Promise<void>打开地图应用搜索地点。
openMapPoiDetail(context: common.Context, poiDetailParams: PoiDetailParams): Promise<void>打开地图应用查看地点详情。
openMapRoutePlan(context: common.Context, routePlanParams: RoutePlanParams): Promise<void>打开地图应用规划路线。
openMapNavi(context: common.Context, naviParams: NaviParams): Promise<void>打开地图应用进行导航。
openMapTaxi(context: common.Context, taxiParams: TaxiParams): Promise<void>打开地图应用打车页面。

地图应用使用的坐标类型​

在国内站点，中国大陆使用GCJ02坐标系，中国台湾使用WGS84坐标系。

在海外站点，统一使用WGS84坐标系。坐标系转换参考：坐标纠偏。

开发步骤​

导入相关模块

import { petalMaps } from '@kit.MapKit'

打开地图应用首页​

通过openMapHomePage，打开地图应用首页。

try {
  await petalMaps.openMapHomePage(this.getUIContext().getHostContext());
} catch (e) {
  console.error(`code:${e.code}, message:${e.message}`);
}

图1 打开地图应用首页

打开地图应用进行地点搜索​

通过openMapTextSearch，传入搜索目标名称，打开地图应用进行地点搜索。

try {
  let params: petalMaps.TextSearchParams = {
    destinationName: '云谷'
  };
  await petalMaps.openMapTextSearch(this.getUIContext().getHostContext(), params);
} catch (e) {
  console.error(`code:${e.code}, message:${e.message}`);
}

图2 打开地图应用进行地点搜索

打开地图应用查看地点详情​

通过openMapPoiDetail，传入地点的经纬度，打开地图应用查看地点详情。

try {
  let params: petalMaps.PoiDetailParams = {
    destinationPosition: {
      latitude: 32.02065982629459,
      longitude: 118.788899213002
    },
    destinationPoiId: '563233191438217472'
  };
  await petalMaps.openMapPoiDetail(this.getUIContext().getHostContext(), params);
} catch (e) {
  console.error(`code:${e.code}, message:${e.message}`);
}

图3 打开地图应用查看地点详情

打开地图应用规划路线​

通过openMapRoutePlan，传入终点经纬度，打开地图应用规划路线。

try {
  let params: petalMaps.RoutePlanParams = {
    destinationPosition: {
      latitude: 31.983015468224288,
      longitude: 118.78058590757131
    }
  };
  await petalMaps.openMapRoutePlan(this.getUIContext().getHostContext(), params);
} catch (e) {
  console.error(`code:${e.code}, message:${e.message}`);
}

图4 打开地图应用规划路线

打开地图应用进行导航​

通过openMapNavi，传入终点经纬度，打开地图应用发起导航。

try {
  let params: petalMaps.NaviParams = {
    destinationPosition: {
      latitude: 31.983015468224288,
      longitude: 118.78058590757131
    }
  };
  await petalMaps.openMapNavi(this.getUIContext().getHostContext(), params);
} catch (e) {
  console.error(`code:${e.code}, message:${e.message}`);
}

图5 打开地图应用进行导航

打开地图应用打车页面​

通过openMapTaxi，传入终点经纬度，打开地图应用发起打车。

try {
  let params: petalMaps.TaxiParams = {
    destinationPosition: {
      latitude: 31.983015468224288,
      longitude: 118.78058590757131
    }
  };
  await petalMaps.openMapTaxi(this.getUIContext().getHostContext(), params);
} catch (e) {
  console.error(`code:${e.code}, message:${e.message}`);
}

图6 打开地图应用进行打车