目录

MapCircle

Use Cases

This section describes how to draw a MapCircle on a map.

MapCircles are typically used to represent the service coverage area, geofence, or area of influence for a point of interest (POI). By setting a center point and radius, they intuitively display the range within a specific distance around a location.

API Description

The MapCircle adding function is mainly provided by MapCircleOptions, addCircle, and MapCircle. For more information about the APIs, please refer to API Reference.

API Description
MapCircleOptions MapCircle parameters.
addCircle(options: mapCommon.MapCircleOptions): Promise<MapCircle> Adds a MapCircle to a map. The longitude and latitude of the center and the radius are specified for the MapCircle to indicate the surrounding area of a location.
MapCircle MapCircle. This API supports updating and querying MapCircle attributes.

Development Procedure

  1. Import required modules.

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

  2. Add a MapCircle. Create initialization parameters in the callback method, and create a MapCircle.

    @Entry
@Component
struct MapCircleDemo {
  private mapOptions?: mapCommon.MapOptions;
  private mapController?: map.MapComponentController;
  private callback?: AsyncCallback<map.MapComponentController>;
  private mapCircle?: map.MapCircle;

  aboutToAppear(): void {
    // Map initialization parameters.
    this.mapOptions = {
      position: {
        target: {
          latitude: 39.918,
          longitude: 116.397
        },
        zoom: 14
      }
    };

    this.callback = async (err, mapController) => {
      if (!err) {
        this.mapController = mapController;
        // MapCircle initialization parameters.
        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
        }
        // Create a MapCircle.
        try {
          this.mapCircle = await this.mapController.addCircle(mapCircleOptions);
        } catch (e) {
          console.error(`Failed to create the mapCircle. Code: ${e.code}; message: ${e.message}`);
        }
      } else {
        console.error(`Failed to initialize the map. Code: ${err.code}; message: ${err.message}`);
      }
    };
  }

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