多边形
===

#### 场景介绍

本章节将向您介绍如何在地图上绘制多边形。

多边形主要用于标识小区、学校、商圈等封闭区域范围，同时可呈现省、市、区县等行政区域边界。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/db/v3/xEw2Xd3TRcCbsjgWmncFlw/zh-cn_image_0000002625188707.jpg?HW-CC-KV=V1&HW-CC-Date=20260612T073626Z&HW-CC-Expire=86400&HW-CC-Sign=E5311578B87DFEAAB4247B155EB050D12BC9AA5AE55E441DBBE2AE34A6ECB9BE "点击放大")

#### 接口说明

添加多边形功能主要由[MapPolygonOptions](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-common#mappolygonoptions)、[addPolygon](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mapcomponentcontroller#addpolygon)和[MapPolygon](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mappolygon)提供，更多接口及使用方法请参见[接口文档](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mappolygon)。

| 接口名 | 描述 |
| :-- | :-- |
| [MapPolygonOptions](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-common#mappolygonoptions) | 多边形参数。 |
| [addPolygon](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mapcomponentcontroller#addpolygon)(options: [mapCommon.MapPolygonOptions](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-common#mappolygonoptions)): Promise<[MapPolygon](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mappolygon)\> | 在地图上添加一个多边形。 |
| [MapPolygon](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mappolygon) | 多边形，支持更新和查询相关属性。 |

#### 开发步骤

1.  导入相关模块。
    
    import { MapComponent, mapCommon, map } from '@kit.MapKit';
    import { AsyncCallback } from '@kit.BasicServicesKit';
    
2.  添加多边形，在callback方法中创建初始化参数并新建polygon。
    
    @Entry
    @Component
    struct MapPolygonDemo {
      // ...
      private mapOptions?: mapCommon.MapOptions;
      private mapController?: map.MapComponentController;
      private callback?: AsyncCallback<map.MapComponentController>;
      private mapPolygon?: map.MapPolygon;
    
      aboutToAppear(): void {
        // 地图初始化参数
        this.mapOptions = {
          position: {
            target: {
              latitude: 31.98,
              longitude: 118.78
            },
            zoom: 14
          }
        };
        this.callback = async (err, mapController) => {
          if (!err) {
            this.mapController = mapController;
            // 多边形初始化参数
            let polygonOptions: mapCommon.MapPolygonOptions = {
              points: \[
                { longitude: 118.78, latitude: 31.975 },
                { longitude: 118.78, latitude: 31.985 },
                { longitude: 118.79, latitude: 31.985 },
                { longitude: 118.79, latitude: 31.975 }
              \],
              clickable: true,
              fillColor: 0xff00DE00,
              geodesic: false,
              strokeColor: 0xff000000,
              jointType: mapCommon.JointType.DEFAULT,
              strokeWidth: 10,
              visible: true,
              zIndex: 10
            }
            // 创建多边形
            try {
              this.mapPolygon = await this.mapController.addPolygon(polygonOptions);
            } catch (e) {
              console.error(\`Failed to create the mapPolygon, 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%')
    
          // ...
      }
    }
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/4d/v3/57Wjbjx9TJuTrAQG4h0C9g/zh-cn_image_0000002625108851.jpg?HW-CC-KV=V1&HW-CC-Date=20260612T073626Z&HW-CC-Expire=86400&HW-CC-Sign=D8B839B6973E54B6C076D61A909035DC589D73D0E90A56A08513CE5E83C2E30A "点击放大")