目录

MapPolygon

Use Cases

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

A MapPolygon is used to identify closed areas such as communities, schools, and business districts, and display the boundaries of administrative regions such as provinces, cities, and districts/counties.

API Description

The MapPolygon adding function is mainly provided by MapPolygonOptions, addPolygon, and MapPolygon. For more information about the APIs, please refer to API Reference.

API Description
MapPolygonOptions MapPolygon parameters.
addPolygon(options: mapCommon.MapPolygonOptions): Promise<MapPolygon> Adds a MapPolygon to a map.
MapPolygon MapPolygon. This API supports updating and querying MapPolygon attributes.

Development Procedure

  1. Import required modules.

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

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

    @Entry
@Component
struct MapPolygonDemo {
  // ...
  private mapOptions?: mapCommon.MapOptions;
  private mapController?: map.MapComponentController;
  private callback?: AsyncCallback<map.MapComponentController>;
  private mapPolygon?: map.MapPolygon;

  aboutToAppear(): void {
    // Map initialization parameters.
    this.mapOptions = {
      position: {
        target: {
          latitude: 31.98,
          longitude: 118.78
        },
        zoom: 14
      }
    };
    this.callback = async (err, mapController) => {
      if (!err) {
        this.mapController = mapController;
        // MapPolygon initialization parameters.
        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
        }
        // Create a MapPolygon.
        try {
          this.mapPolygon = await this.mapController.addPolygon(polygonOptions);
        } catch (e) {
          console.error(`Failed to create the mapPolygon. 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%')

      // ...
  }
}