目录

Navigation and Other Capabilities Provided by the Map App

Use Cases

Starting from 5.0.3(15), the following functions are supported: opening the map app home screen, as well as launching the map app for place search, place details viewing, route planning, and navigation. Starting from 6.0.1(21), the function of initiating ride hailing in the map app is supported. Starting from 6.1.1(24), the destination description is supported when a user launches the map app to view place details, and the offline map management screen of the map app can be opened.

This section describes how to implement the following capabilities:

API Description

The map app functions are called using the openMapHomePage, openMapTextSearch, openMapPoiDetail, openMapRoutePlan, openMapNavi, openMapTaxi, and openMapOfflineDataManagement APIs in the petalMaps namespace. For more information about the APIs, please refer to API Reference.

API Description Description
TextSearchParams Parameters for text search.
PoiDetailParams Parameters for POI details.
RoutePlanParams Parameters for route planning.
NaviParams Parameters for navigation.
TaxiParams Parameters for ride hailing.
OfflineDataParams Parameters for offline map management.
openMapHomePage(context: common.Context): Promise<void> Opens the home screen of the map app.
openMapTextSearch(context: common.Context, textSearchParams: TextSearchParams): Promise<void> Launches the map app for place search.
openMapPoiDetail(context: common.Context, poiDetailParams: PoiDetailParams): Promise<void> Launches the map app to view place details.
openMapRoutePlan(context: common.Context, routePlanParams: RoutePlanParams): Promise<void> Launches the map app to plan routes.
openMapNavi(context: common.Context, naviParams: NaviParams): Promise<void> Launches the map app for navigation.
openMapTaxi(context: common.Context, taxiParams: TaxiParams): Promise<void> Opens the ride hailing screen of the map app.
openMapOfflineDataManagement(context: common.Context, offlineDataParams: OfflineDataParams): Promise<void> Opens the offline map management screen of the map app.

Coordinate Systems Used by the Map App

Sites in the Chinese mainland, Hong Kong (China), and Macao (China) use the GCJ02 coordinate system, and sites in Taiwan (China) use the WGS84 coordinate system.

Sites outside China use the WGS84 coordinate system. For details about coordinate conversion, please refer to Coordinate Rectification.

Development Procedure

Import required modules.

import { petalMaps } from '@kit.MapKit';
import { mapCommon } from '@kit.MapKit';

[h2]Opening the Home Screen of the Map App

Call openMapHomePage to open the home screen of the map app.

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

Figure 1 Opening the home screen of the map app

[h2]Launching the Map App to View Place Details

Call openMapPoiDetail and pass in the longitude and latitude of a place to launch the map app to view details of the place.

try {
  let params: petalMaps.PoiDetailParams = {
    destinationPosition: {
      latitude: 31.968789,
      longitude: 118.798537
    },
    destinationName: 'Marker',
    zoom: 17,
    coordinateType: mapCommon.CoordinateType.GCJ02,
    destinationAddress: 'This is the demo address.'
  };
  await petalMaps.openMapPoiDetail(this.getUIContext().getHostContext(), params);
} catch (e) {
  console.error(`code:${e.code}, message:${e.message}`);
}

Figure 3 Launching the map app to view place details

[h2]Launching the Map App to Plan Routes

Call openMapRoutePlan and pass in the longitude and latitude of a destination to launch the map app to plan routes.

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}`);
}

Figure 4 Launching the map app to plan routes

[h2]Launching the Map App for Navigation

Call openMapNavi and pass in the longitude and latitude of a destination to launch the map app for navigation.

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}`);
}

Figure 5 Launching the map app for navigation

[h2]Opening the Offline Map Management Screen of the Map App

Call openMapOfflineDataManagement and pass in the offline map management parameters to open the offline map management screen of the map app.

try {
  // Open the offline map management screen of the map app on the watch.
  let params: petalMaps.OfflineDataParams = {
    scenarios: 'WATCH',
    // Set of recommended regions for offline map download.
    recommendedRegionIds: ['1026355368865976081']
  };
  await petalMaps.openMapOfflineDataManagement(this.getUIContext().getHostContext(), params);
} catch (e) {
  console.error(`code:${e.code}, message:${e.message}`);
}

try {
  // Open the offline map management screen of the map app on the phone.
  let params: petalMaps.OfflineDataParams = {
    scenarios: 'PHONE',
    // Set of recommended regions for offline map download.
    recommendedRegionIds: ['1026355368865976081']
  };
  await petalMaps.openMapOfflineDataManagement(this.getUIContext().getHostContext(), params);
} catch (e) {
  console.error(`code:${e.code}, message:${e.message}`);
}

try {
  // Open the navigation voice management screen of the map app.
  let params: petalMaps.OfflineDataParams = {
    scenarios: 'VOICE'
  };
  await petalMaps.openMapOfflineDataManagement(this.getUIContext().getHostContext(), params);
} catch (e) {
  console.error(`code:${e.code}, message:${e.message}`);
}

Figure 7 Opening the offline map management screen of the map app on the watch

Figure 8 Opening the offline map management screen of the map app on the phone

Figure 9 Opening the navigation voice management screen of the map app