输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
文档管理中心

HarmonyOS

输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
指南
指南应用服务Map Kit（地图服务）地图交互地图截图

地图截图

更新时间: 2026-06-12 06:54
本文导读

本章节将向您介绍如何实现地图截图功能。

地图截图指对当前屏幕显示区域进行截屏，支持对地图、覆盖物、Logo进行屏幕截图。地图截图功能适用于需要将当前地图状态保存为图片的场景，如分享当前位置、生成导航路线图、记录特定视角的地图内容等。该功能可以帮助开发者快速实现地图内容的可视化输出，提升用户体验。

接口说明

以下是地图截图相关接口，以下功能主要由snapshot提供，更多接口及使用方法请参见接口文档。

展开
接口名 描述
snapshot(): Promise<image.PixelMap> 地图截图。

开发步骤

  1. 导入相关模块。

    收起
    自动换行
    深色代码主题
    复制
    1. import { MapComponent, mapCommon, map } from '@kit.MapKit';
    2. import { AsyncCallback } from '@kit.BasicServicesKit';
    3. import { image } from '@kit.ImageKit';

  2. 调用snapshot方法对当前屏幕进行截图。

    收起
    自动换行
    深色代码主题
    复制
    1. @Entry
    2. @Component
    3. struct MapScreenshotsDemo {
    4.   // ...
    5.   private mapOptions?: mapCommon.MapOptions;
    6.   private mapController?: map.MapComponentController;
    7.   private callback?: AsyncCallback<map.MapComponentController>;
    8.   @State image?: image.PixelMap = undefined;
    9. 

    10.   aboutToAppear(): void {
    11.     // 地图初始化参数，设置地图中心点坐标及层级
    12.     this.mapOptions = {
    13.       position: {
    14.         target: {
    15.           latitude: 39.9,
    16.           longitude: 116.4
    17.         },
    18.         zoom: 10
    19.       }
    20.     };
    21. 

    22.     // 地图初始化的回调
    23.     this.callback = async (err, mapController) => {
    24.       if (!err) {
    25.         // 获取地图的控制器类，用来操作地图
    26.         this.mapController = mapController;
    27.       } else {
    28.         console.error(`Failed to initialize the map, code is：${err.code}, message is ${err.message}`);
    29.       }
    30.     };
    31.   }
    32. 

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

    41.           Scroll(new Scroller()) {
    42.             Column() {
    43.               Image(this.image)
    44.                 .objectFit(ImageFit.Auto)
    45.                 .border({ width: 1, color: Color.Red }).width('100%')
    46.               Button('获取截图')
    47.                 .margin({ left: 10 })
    48.                 .fontSize(12)
    49.                 .onClick(async () => {
    50.                   if (this.mapController) {
    51.                     // 获取截图
    52.                     let pixelMap = await this.mapController.snapshot();
    53.                     this.image = pixelMap;
    54.                   }
    55.                 });
    56.             }
    57.           }.width('70%').height('50%')
    58.         }.width('100%')
    59.       }.height('100%')
    60. 

    61.       // ...
    62.   }
    63. }
更改地图位置
在地图上绘制
相关推荐
文档静态图
文档如何对指定区域进行截图
文档Web组件如何实现页面截图
文档使用组件截图（ComponentSnapshot）
文档@ohos.screenshot (屏幕截图)
文档常见截图场景实现方案
文档如何通过HDC命令截屏/获取相册
文档截屏事件监听及分享
文档如何进行截屏并获取截屏内容
文档如何截取旋转后的图片
简体中文
华为开发者联盟 版权所有 ©2026
问题反馈
使用条款
华为开发者联盟用户协议
关于华为开发者联盟与隐私的声明
Cookies
开源软件声明
在 指南 中进行搜索
请输入您想要搜索的关键词