华为HarmonyOS地图服务 10 - 如何在地图上绘制圆？

场景介绍

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

 

接口说明

添加圆形功能主要由MapCircleOptions、addCircle和MapCircle提供，更多接口及使用方法请参见接口文档。

接口名	描述
MapCircleOptions	用于描述MapCircle属性。
addCircle(options: mapCommon.MapCircleOptions): Promise<MapCircle>	在地图上添加一个圆，指定圆心经纬度和圆的半径，用于表示某个位置的周边范围。
MapCircle	更新和查询圆的接口。

开发步骤

1. 导入相关模块。

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

2. 添加圆，在Callback方法中创建初始化参数并新建Circle，效果如下图。

   @Entry
   @Component
   struct MapCircleDemo {
   private mapOption?: mapCommon.MapOptions;
   private mapController?: map.MapComponentController;
   private callback?: AsyncCallback<map.MapComponentController>;
   private mapCircle?: map.MapCircle;
   aboutToAppear(): void {
   // 地图初始化参数
   this.mapOption = {
   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
   this.mapCircle = await this.mapController.addCircle(mapCircleOptions);
   }
   };
   }
   build() {
   Stack() {
   Column() {
   MapComponent({ mapOptions: this.mapOption, mapCallback: this.callback });
   }.width('100%')
   }.height('100%')
   }
   }