We use essential cookies for the website to function, as well as analytics cookies for analyzing and creating statistics of the website performance. To agree to the use of analytics cookies, click "Accept All". You can manage your preferences at any time by clicking "Cookie Settings" on the footer. More Information.

Cookie Settings
Only Essential Cookies
Accept All
MaterialsConsole

HarmonyOS

输入关键字搜索
HMS Core
AppGallery Connect
HUAWEI HiAI
CTRL+K
GuidesApplication ServicesMap KitMap InteractionMap Screenshot

Map Screenshot

Last updated: 2026-07-01 01:47
Content overview

This section describes how to implement the map screenshot function.

A map screenshot is a captured image of the visible region on a map, including map elements, overlays, and logos. The map screenshot function is applicable to scenarios where the current map state needs to be saved as an image, such as sharing the current location, generating a navigation route map, and recording map content from a specific perspective. This function helps you quickly implement visualized output of map content, improving user experience.

API Description

The following table describes the map screenshot API, which is provided by snapshot. For more information about the API, please refer to API Reference.

Expand
API Description
snapshot(): Promise<image.PixelMap> Takes map screenshots.

Development Procedure

  1. Import required modules.

    Collapse
    Word wrap
    Dark theme
    Copy code
    1. import { MapComponent, mapCommon, map } from '@kit.MapKit';
    2. import { AsyncCallback } from '@kit.BasicServicesKit';
    3. import { image } from '@kit.ImageKit';

  2. Call the snapshot method to take a screenshot of the current map screen.

    Collapse
    Word wrap
    Dark theme
    Copy code
    1. @Entry
    2. @Component
    3. struct HuaweiMapDemo {
    4.   private mapOptions?: mapCommon.MapOptions;
    5.   private callback?: AsyncCallback<map.MapComponentController>;
    6.   private mapController?: map.MapComponentController;
    7.   @State image?: image.PixelMap = undefined;
    8. 

    9.   aboutToAppear(): void {
    10.     // Map initialization parameters used to set the coordinates of the map center point and zoom level.
    11.     this.mapOptions = {
    12.       position: {
    13.         target: {
    14.           latitude: 39.9,
    15.           longitude: 116.4
    16.         },
    17.         zoom: 10
    18.       }
    19.     };
    20. 

    21.     // Map initialization callback.
    22.     this.callback = async (err, mapController) => {
    23.       if (!err) {
    24.         // Obtain the controller class of the map to operate the map.
    25.         this.mapController = mapController;
    26.       } else {
    27.         console.error(`Failed to initialize the map. Code: ${err.code}; message: ${err.message}`);
    28.       }
    29.     };
    30.   }
    31. 

    32.   build() {
    33.     Stack() {
    34.       Column() {
    35.         MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback })
    36.           .width('100%')
    37.           .height('50%');
    38. 

    39.         Scroll(new Scroller()) {
    40.           Column() {
    41.             Image(this.image)
    42.               .objectFit(ImageFit.Auto)
    43.               .border({ width: 1, color: Color.Red }).width("100%")
    44.             Button("Get Screenshot")
    45.               .margin({ left: 10 })
    46.               .fontSize(12)
    47.               .onClick(async () => {
    48.                 if (this.mapController) {
    49.                   // Obtain the screenshot.
    50.                   let pixelMap = await this.mapController.snapshot();
    51.                   this.image = pixelMap;
    52.                 }
    53.               });
    54.           }
    55.         }.width('70%').height("50%")
    56.       }.width('100%')
    57.     }.height('100%')
    58.   }
    59. }
Map Location Change
Drawing on a Map
English
©2026 HUAWEI Developers. All rights reserved.
Terms of Use
Statement About HUAWEI Developers and Privacy
Cookies
Cookie Settings
Open-Source Software Notice
Search in Guides
Enter a keyword.