目录

Module Description

Map Kit enables you to render maps, draw various overlays (such as markers, polylines, arcs, polygons, and circles) on maps, add animation effects, handle map interaction events, and update map states.

Use cases:

Key Classes and APIs

[h2]Core Components

Class/API Description
MapComponent Map UI component, which returns MapComponentController through a callback.
MapComponentController Main map controller, which is the primary entry point for all map operations.
MapEventManager Map event listener manager.
BaseOverlay Base overlay class. All overlays inherit from this class.

[h2]Overlays

Class/API Description
Marker Marker.
MapPolyline Polyline.
MapArc Arc.
MapPolygon Polygon.
MapCircle Circle.
PointAnnotation Point annotation.
Bubble Bubble.
ClusterOverlay Marker clustering.
ImageOverlay Image overlay.
BuildingOverlay 3D building.
TraceOverlay Dynamic trajectory.
TileOverlay Tile overlay.
Heatmap Heatmap.
MvtOverlay Vector layer.
FlowFieldOverlay Flow field layer.
MassPointOverlay Massive point layer.

[h2]Animations

Class/API Description
Animation Base abstract class for animations.
AlphaAnimation Alpha animation.
RotateAnimation Rotation animation.
ScaleAnimation Scale animation.
TranslateAnimation Translation animation.
FontSizeAnimation Font size animation.
PlayImageAnimation Frame animation.
AnimationSet Animation set.

[h2]Data Models

Class/API Description
MapOptions Map initialization parameters.
LatLng Longitude-latitude coordinates.
CameraPosition Camera position status.
LatLngBounds Longitude-latitude boundary rectangle.

API Combined Usage Guide

[h2]Map Initialization and Display

To use MapComponent to display a map, perform the following steps.

// 1. Import the required module.
import { map, mapCommon, MapComponent } from '@kit.MapKit';

// 2. Create map initialization parameters.
let mapOptions: mapCommon.MapOptions = {
  position: {
    target: { latitude: 39.9, longitude: 116.4 },
    zoom: 10
  }
};

// 3. Define a callback function to obtain MapComponentController.
let mapCallback = async (err, mapController) => {
  if (!err) {
    // Perform the follow-up procedure after the controller is successfully obtained.
    let mapController = mapController;
    let mapEventManager = mapController.getEventManager();
  }
};

// 4. Use MapComponent in the UI.
MapComponent({
  mapOptions: mapOptions,
  mapCallback: mapCallback
})

[h2]Overlay Adding Process

// 1. Create overlay configuration parameters.
let markerOptions: mapCommon.MarkerOptions = {
  position: { latitude: 39.9, longitude: 116.4 },
  clickable: true,
  title: "Marker Title"
};

// 2. Add an overlay through MapComponentController.
let marker = await mapController.addMarker(markerOptions);

// 3. Perform further operations on the overlay.
marker.setTitle ("New Title");
marker.showInfoWindow();

[h2]Map Animation and Interaction

// 1. Obtain MapEventManager.
let mapEventManager = mapController.getEventManager();

// 2. Subscribe to a map event.
mapEventManager.on("mapLoad", () => {
  console.info("Map loaded.");
});

// 3. Create a CameraUpdate object and execute the animation.
let cameraUpdate = map.newCameraPosition({
  target: { latitude: 40.0, longitude: 117.0 },
  zoom: 12
});
mapController.animateCamera(cameraUpdate, 1000);

[h2]Animation Usage

// 1. Create an animation instance.
let animation = new map.RotateAnimation(0, 270);

// 2. Configure animation parameters.
animation.setDuration(2000);
animation.setRepeatCount(map.AnimationRepeatMode.RESTART);

// 3. Subscribe to animation events.
animation.on("animationStart", () => {});
animation.on("animationEnd", () => {});

// 4. Apply the animation to the overlay.
marker.startAnimation(animation);