场景介绍

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

接口说明

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

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

开发步骤

1. 导入相关模块。
   1. import { MapComponent, mapCommon, map } from '@kit.MapKit';
   2. import { AsyncCallback } from '@kit.BasicServicesKit';
2. 添加圆，在Callback方法中创建初始化参数并新建Circle，效果如下图。
   1. @Entry
   2. @Component
   3. struct MapCircleDemo {
   4. private mapOption?: mapCommon.MapOptions;
   5. private mapController?: map.MapComponentController;
   6. private callback?: AsyncCallback<map.MapComponentController>;
   7. private mapCircle?: map.MapCircle;
   8. aboutToAppear(): void {
   9. // 地图初始化参数
   10. this.mapOption = {
   11. position: {
   12. target: {
   13. latitude: 39.918,
   14. longitude: 116.397
   15. },
   16. zoom: 14
   17. }
   18. };
   19. this.callback = async (err, mapController) => {
   20. if (!err) {
   21. this.mapController = mapController;
   22. // Circle初始化参数
   23. let mapCircleOptions: mapCommon.MapCircleOptions = {
   24. center: {
   25. latitude: 39.918,
   26. longitude: 116.397
   27. },
   28. radius: 500,
   29. clickable: true,
   30. fillColor: 0XFFFFC100,
   31. strokeColor: 0xFFFF0000,
   32. strokeWidth: 10,
   33. visible: true,
   34. zIndex: 15
   35. }
   36. // 创建Circle
   37. this.mapCircle = await this.mapController.addCircle(mapCircleOptions);
   38. }
   39. };
   40. }
   41. build() {
   42. Stack() {
   43. Column() {
   44. MapComponent({ mapOptions: this.mapOption, mapCallback: this.callback });
   45. }.width('100%')
   46. }.height('100%')
   47. }
   48. }