圆形
==

#### 场景介绍

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

圆形通常用于表示特定区域的服务覆盖范围、地理围栏或兴趣点的影响区域。通过设置中心点和半径，可以直观地展示某一地点周边一定距离内的范围。

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

#### 接口说明

添加圆形功能主要由[MapCircleOptions](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-common#mapcircleoptions)、[addCircle](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mapcomponentcontroller#addcircle)和[MapCircle](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mapcircle)提供，更多接口及使用方法请参见[接口文档](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mapcircle)。

| 接口名 | 描述 |
| :-- | :-- |
| [MapCircleOptions](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-common#mapcircleoptions) | 圆形参数。 |
| [addCircle](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mapcomponentcontroller#addcircle)(options: [mapCommon.MapCircleOptions](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-common#mapcircleoptions)): Promise<[MapCircle](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mapcircle)\> | 在地图上添加一个圆，指定圆心经纬度和圆的半径，用于表示某个位置的周边范围。 |
| [MapCircle](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mapcircle) | 圆形，支持更新和查询相关属性。 |

#### 开发步骤

1.  导入相关模块。
    
    import { MapComponent, mapCommon, map } from '@kit.MapKit';
    import { AsyncCallback } from '@kit.BasicServicesKit';
    
2.  添加圆，在callback方法中创建初始化参数并新建Circle。
    
    @Entry
    @Component
    struct MapCircleDemo {
      private mapOptions?: mapCommon.MapOptions;
      private mapController?: map.MapComponentController;
      private callback?: AsyncCallback<map.MapComponentController>;
      private mapCircle?: map.MapCircle;
    
      aboutToAppear(): void {
        // 地图初始化参数
        this.mapOptions = {
          position: {
            target: {
              latitude: 39.918,
              longitude: 116.397
            },
            zoom: 14
          }
        };
    
        this.callback = async (err, mapController) => {
          if (!err) {
            this.mapController = mapController;
            // Circle初始化参数
            let mapCircleOptions: mapCommon.MapCircleOptions = {
              center: {
                latitude: 39.918,
                longitude: 116.397
              },
              radius: 500,
              clickable: true,
              fillColor: 0xFFFFC100,
              strokeColor: 0xFFFF0000,
              strokeWidth: 10,
              visible: true,
              zIndex: 15
            }
            // 创建Circle
            try {
              this.mapCircle = await this.mapController.addCircle(mapCircleOptions);
            } catch (e) {
              console.error(\`Failed to create the mapCircle, 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/dc/v3/UhdyPw_hRBOiIy3A_54j1A/zh-cn_image_0000002594829262.jpg?HW-CC-KV=V1&HW-CC-Date=20260612T073626Z&HW-CC-Expire=86400&HW-CC-Sign=37DCA8B3DB79F4764A98AE0B38348778B6A15B2ECE35BE131CA521FD66030622 "点击放大")