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

HarmonyOS

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

弧线

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

场景介绍

本章节将向您介绍如何在地图上绘制弧线，通过MapArcParams类设置弧线的位置、宽度、颜色等参数。

弧线主要用于展示飞机、轮船等出行路线，直观呈现弧形轨迹，同时可在交叉路口等位置指示转向方向。

接口说明

添加弧线功能主要由MapArcParams、addArc和MapArc提供，更多接口及使用方法请参见接口文档。

展开
接口名 描述
MapArcParams 弧线参数。
addArc(params: mapCommon.MapArcParams): MapArc 添加一条弧线。
MapArc 弧线，支持更新和查询相关属性。

开发步骤

添加弧线

  1. 导入相关模块。

    import { map, mapCommon, MapComponent } from '@kit.MapKit';
import { AsyncCallback } from '@kit.BasicServicesKit';

  2. 添加弧线，在callback方法中创建初始化参数并新建MapArc。

    @Entry
@Component
struct MapArcDemo {
  private TAG = "OHMapSDK_MapArcDemo";
  private mapOptions?: mapCommon.MapOptions;
  private mapController?: map.MapComponentController;
  private callback?: AsyncCallback<map.MapComponentController>;
  private mapArc?: map.MapArc;

  aboutToAppear(): void {
    this.mapOptions = {
      position: {
        target: {
          latitude: 34.757975,
          longitude: 113.665412
        },
        zoom: 6
      }
    }

    this.callback = async (err, mapController) => {
      if (!err) {
        this.mapController = mapController;
        if (!this.mapController) {
          console.error(this.TAG, "mapController is null");
          return;
        }
        // 设置弧线参数
        let mapArcParams: mapCommon.MapArcParams = {
          // 弧线起点坐标
          startPoint: {
            latitude: 39.913138,
            longitude: 116.415112
          },
          // 弧线终点坐标
          endPoint: {
            latitude: 28.239473,
            longitude: 112.954094
          },
          // 弧线中心点坐标
          centerPoint: {
            latitude: 33.86970399048567,
            longitude: 112.08633528544145
          },
          width: 10,
          color: 0xffff0000,
          visible: true,
          zIndex: 100
        };
        // 添加弧线
        try {
          this.mapArc = await this.mapController.addArc(mapArcParams);
        } catch (e) {
          console.error(`Failed to create the mapArc, code is：${e.code}, message is ${e.message}`);
        }
      } else {
        console.error(`Failed to initialize the map, code is：${err.code}, message is ${err.message}`);
      }
    }
  }

  build() {
    Stack() {
      Column() {
        MapComponent({
          mapOptions: this.mapOptions,
          mapCallback: this.callback
        })
          .width('100%')
          .height('100%');
      }.width('100%')
    }.height('100%')
  }
}

信号路线
多边形
相关推荐
文档圆形
文档折线
文档CanvasContext
文档多边形
文档绘制路径
文档如何在地图上绘制虚线
文档动态轨迹
文档Interface (MapArc)
文档几何形状绘制（ArkTS）
文档怎么在地图中确定某一段路线的方向
简体中文
华为开发者联盟 版权所有 ©2026
问题反馈
使用条款
华为开发者联盟用户协议
关于华为开发者联盟与隐私的声明
Cookies
开源软件声明
在 指南 中进行搜索
请输入您想要搜索的关键词