鸿蒙 Map Kit 地图：控件交互、事件交互

   在之前的文章中介绍了地图显示、地图类型切换、我的位置等功能。其实地图还有很多经常用到的交互能力，包括控件交互、手势交互和事件交互。

比如：

• 控件交互：缩放控件、比例尺、指南针

• 手势交互：缩放、滚动、旋转、倾斜手势的开启/关闭

• 事件交互：地图点击/长按、标记点击、我的位置按钮点击等事件监听

一、控件交互

控件是指浮在地图组件上的一系列用于操作地图的组件，包括：

• 缩放按钮

• 定位按钮（我的位置）

• 比例尺

• 指南针

• 地图Logo

接口说明

开发步骤

缩放控件

默认情况下是开启的。

// 开启缩放控件
this.mapController.setZoomControlsEnabled(true);

比例尺

默认情况下是关闭的。

// 开启比例尺控件
this.mapController.setScaleControlsEnabled(true);

// 调整比例尺位置
let point: mapCommon.MapPoint = {
positionX: 1000, // 以地图组件左上角为原点，向右移动1000px
positionY: 1000 // 以地图组件左上角为原点，向下移动1000px
};
this.mapController.setScalePosition(point);

// 获取当前层级的比例尺大小
let level = this.mapController.getScaleLevel();

// 获取比例尺控件宽高
let height = this.mapController.getScaleControlsHeight();
let width = this.mapController.getScaleControlsWidth();

// 设置比例尺控件常显
this.mapController.setAlwaysShowScaleEnabled(true);

// 查询比例尺控件是否常显
let scaleEnabled = this.mapController.isAlwaysShowScaleEnabled();

指南针

默认情况下是开启的。当地图不是指向正北方向或发生倾斜时，地图右上角显示指南针图标；当地图为正北方向且未倾斜时，指南针图标隐藏。

// 开启指南针控件
this.mapController.setCompassControlsEnabled(true);

// 调整指南针位置
let point: mapCommon.MapPoint = {
positionX: 1000,
positionY: 1000
};
this.mapController.setCompassPosition(point);

地图Logo

// 将Logo放置在右下角位置
this.mapController.setLogoAlignment(mapCommon.LogoAlignment.BOTTOM_END);

// 设置地图边界与Logo之间的间距（单位：px）
let padding: mapCommon.Padding = {
right: 50,
bottom: 50
};
this.mapController.setLogoPadding(padding);

注意：地图Logo不允许被遮挡，可通过setLogoPadding设置地图边界区域来避免遮挡。

二、手势交互

Map Kit提供了多种手势供用户与地图之间进行交互：缩放、滚动、旋转和倾斜。这些手势默认开启。

接口说明

开发步骤

// 缩放手势（双指捏合）
this.mapController.setZoomGesturesEnabled(true);

// 滚动平移手势（手指拖动）
this.mapController.setScrollGesturesEnabled(true);

// 旋转手势（双指旋转）
this.mapController.setRotateGesturesEnabled(true);

// 倾斜手势（双指上下滑动）
this.mapController.setTiltGesturesEnabled(true);

// 启用或禁止所有手势
this.mapController.setAllGesturesEnabled(false);

三、事件交互

地图的事件交互包括地图点击/长按、相机移动、标记点击、我的位置按钮点击等。主要通过MapEventManager实现，可通过getEventManager()方法获取。

接口说明

开发步骤

初始化事件管理接口

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

地图点击事件

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

地图长按事件

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

相机移动监听

地图移动是通过模拟相机移动的方式实现的。

// 相机开始移动
this.mapEventManager.on("cameraMoveStart", (reason: number) => {
console.info(`cameraMoveStart reason = ${reason}`);
});

// 相机移动中（多次调用）
this.mapEventManager.on("cameraMove", () => {
console.info(`cameraMove`);
});

// 相机停止移动
this.mapEventManager.on("cameraIdle", () => {
console.info(`cameraIdle`);
});

标记点击事件

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

我的位置按钮点击事件

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