Event Interaction

This section describes how to set listeners for map tap and long press events, camera movement events, and other events such as my-location icon tap events. The Huawei map's movement functionality is implemented by simulating camera movements.

API Description

The following table describes APIs for map event listening, which are mainly provided by MapEventManager. You can obtain MapEventManager using the getEventManager method. For more information about the APIs, please refer to API Reference.

API	Description
on(type: 'mapClick', callback: Callback<mapCommon.LatLng>): void	Sets a listener for map tap events.
on(type: 'mapLongClick', callback: Callback<mapCommon.LatLng>): void	Sets a listener for map long-press events.
on(type: 'cameraMoveStart', callback: Callback<number>): void	Sets a listener for camera movement start events.
on(type: 'cameraMove', callback: Callback<void>): void	Sets a listener for camera movement events.
on(type: 'cameraIdle', callback: Callback<void>): void	Sets a listener for camera movement end events.
on(type: 'markerClick' , callback: Callback<Marker>): void	Sets a listener for Marker tap events.
on(type: 'myLocationButtonClick', callback: Callback<void>): void	Sets a listener for my-location icon tap events.
on(type: 'pointAnnotationClick', callback: Callback<PointAnnotation>): void	Sets a listener for PointAnnotation tap events.

Development Procedure

[h2]Initializing the Event Management API of the Map Component

this.mapEventManager = this.mapController.getEventManager();

[h2]Listening for Map Tap Events

let callback = (position: mapCommon.LatLng) => {
  console.info("mapClick", `on-mapClick position = ${position.longitude}`);
};
this.mapEventManager.on("mapClick", callback);

[h2]Listening for Map Long-Press Events

let callback = (position: mapCommon.LatLng) => {
  console.info("mapLongClick", `on-mapLongClick position = ${position.longitude}`);
};
this.mapEventManager.on("mapLongClick", callback);

[h2]Listening for Camera Movement Events

After a listener is set for camera movement events, camera movement status can be listened. The Huawei map's movement functionality is implemented by simulating camera movements.

When the camera starts to move, cameraMoveStart is called back.

let callback = (reason: number) => {
  console.info("cameraMoveStart", `on-cameraMoveStart reason = ${reason}`);
};
this.mapEventManager.on("cameraMoveStart", callback);

When the camera moves or a user interacts with the map, cameraMove is called for multiple times.

let callback = () => {
  console.info("cameraMove", `on-cameraMove`);
};
this.mapEventManager.on("cameraMove", callback);

When the camera stops moving, cameraIdle is called back.

let callback = () => {
  console.info("cameraIdle", `on-cameraIdle`);
};
this.mapEventManager.on("cameraIdle", callback);

[h2]Listening for Marker Tap Events

A Marker can be added at a specified location on the map to identify a place, store, or building. For details, please refer to Marker.

let callback = (marker: map.Marker) => {
  console.info("markerClick", `markerClick: ${marker.getId()}`);
};
this.mapEventManager.on("markerClick", callback);

[h2]Listening for My-Location Tap Events

For details, please refer to Showing My Location.

let callback = () => {
  console.info("myLocationButtonClick", `myLocationButtonClick`);
};
this.mapEventManager.on("myLocationButtonClick", callback);

[h2]Listening for PointAnnotation Tap Events

A PointAnnotation can be added at a specified location on a map to identify locations such as stores and buildings, and the location details can be displayed in an information window. For details, please refer to PointAnnotation.

let callback = (pointAnnotation: map.PointAnnotation) => {
  console.info("pointAnnotationClick", `pointAnnotationClick: ${pointAnnotation.getId()}`);
};
this.mapEventManager.on("pointAnnotationClick", callback);

目录