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
SOCIAL SHARE CARD GENERATOR