Add custom image markers to the map component with digital subscripts

Read the original article：Add custom image markers to the map component with digital subscripts

Problem description

How to add a custom image marker with a numeric badge in the upper right corner in the map component?

Background knowledge

Custom markers can be used to modify the default marker icon to a custom icon. Custom icons can be drawn by customizing the @Builder function, using the Badge component to add a numeric badge, and then using the component screenshot to obtain the custom icon.

• Custom markers: You can change the default marker icon to a custom icon by setting the icon property (supports string | image.PixelMap | Resource types) in MarkerOptions to the resource of the custom icon.
• Badge: An information marking component, which can be attached to a single component as a container component for information reminders.
• Component screenshots: Provides the ability to obtain component screenshots, including screenshots of loaded components and screenshots of unloaded components.

Solution

First, create a @Builder function and draw the style, in which the Badge component is used to add digital markers, then use the component screenshot to convert the @Builder function into a PixelMap, and finally use a custom marker to set the PixelMap to the Marker.

Refer to the following sample code:

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

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

  @Builder
  RandomBuilder() {
    Row() {
      Badge({
        count: 3,
        style: { badgeColor: Color.Red },
        position: BadgePosition.RightTop,
      }) {
        Row() {
          Text("Custom image tags")
        }
        .padding(12)
        .backgroundColor(Color.White)
        .borderRadius(12)
        .shadow({ radius: 12, color: "#33000000" })
      }
    }
    .backgroundColor('#00000000')
    .padding(12)
  }

  addMarker() {
    componentSnapshot.createFromBuilder(() => {
      this.RandomBuilder()
    },
      async (error: Error, pixelMap: image.PixelMap) => {
        if (error) {
          console.error("error: " + JSON.stringify(error));
          return;
        }

        // Marker initialization parameters
        let markerOptions: mapCommon.MarkerOptions = {
          position: {
            latitude: // ...,
            longitude: // ...
          },
          icon: pixelMap
        };
        this.mapController?.addMarker(markerOptions);
      })
  }

  aboutToAppear(): void {
    // Map initialization parameters
    this.mapOptions = {
      position: {
        target: {
          latitude: // ...,
          longitude: // ...
        },
        zoom: 15
      }
    };
    this.callback = async (err, mapController) => {
      if (!err) {
        this.mapController = mapController;
        this.addMarker();
      }
    };
  }

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

Written by Merve Yonetci