目录

Static Map

Use Cases

This section describes how to use the static map function. The static map function returns a map image. You can embed the map as an image into your app or atomic service. This function allows you to specify the requested map location and image size.

Figure 1 Static map

API Description

The following table describes static map APIs. The static map function is mainly provided by methods in the staticMap namespace. For more information about the APIs, please refer to API Reference.

API Description
StaticMapOptions Static map attributes.
getMapImage(options: StaticMapOptions): Promise<image.PixelMap> Creates a static map based on the provided parameters.
getMapImage(context: common.Context, options: StaticMapOptions): Promise<image.PixelMap> Creates a static map based on the provided parameters. The context can be passed.

Development Procedure

  1. Import required modules.

    import { staticMap } from '@kit.MapKit';
import { BusinessError } from '@kit.BasicServicesKit';

  2. Create static map initialization parameters. Call the getMapImage method to obtain a static map. The result is shown in the following figure.

    @Entry
@Component
struct MapStaticDiagramDemo {
  // ...
  @State image?: PixelMap = undefined;

  build() {
    // ...
      Column() {
        this.buildDemoUI();
      }.width('100%')
      .margin({ bottom: 48 })
      .backgroundColor(0xf2f2f2)
      .height('100%')

      // ...
  }

  @Builder
  buildDemoUI() {
    // Display the obtained static map.
    Image(this.image)
      .width('100%')
      .fitOriginalSize(false)
      .border({ width: 1 })
      .borderStyle(BorderStyle.Dashed)
      .objectFit(ImageFit.Contain)
      .height('90%')

    Row() {
      Button('getStaticMap')
        .fontSize(12)
        .onClick(async () => {
          // Set Markers of the static map.
          let markers: staticMap.StaticMapMarker[] = [{
            location: {
              latitude: 50,
              longitude: 126.3
            },
            font: 'statics',
            defaultIconSize: staticMap.IconSize.TINY
          }];

          // Set the static map drawing path.
          let path: staticMap.StaticMapPath = {
            locations: [
              {
                latitude: 50,
                longitude: 126
              },
              {
                latitude: 50.3,
                longitude: 126
              },
              {
                latitude: 50.3,
                longitude: 126.3
              },
              {
                latitude: 49.7,
                longitude: 126
              },
              {
                latitude: 50,
                longitude: 126
              }
            ],
            width: 3
          };

          // Assemble static map parameters.
          let option: staticMap.StaticMapOptions = {
            location: {
              latitude: 50,
              longitude: 126
            },
            zoom: 10,
            imageWidth: 1024,
            imageHeight: 1024,
            scale: 1,
            markers: markers,
            path: path
          };

          try {
            // Obtain the static map.
            this.image = await staticMap.getMapImage(option);
            console.info('Succeeded in getting image.');
          } catch (error) {
            const err: BusinessError = error as BusinessError;
            console.error(`Failed in getting image, code: ${err.code}, message: ${err.message}`);
          }
        })
    }.margin({ top: 12 })
  }
}

    Figure 2 Calling the getMapImage method to obtain a static map