地图控件主要包括：百度logo控件、缩放控件、比例尺控件和地图审图控件。

地图控件采用鸿蒙@Monitor装饰器状态变量变化监听和emitter事件机制两种方式进行控制（优先推荐第一种）。

相关引入如下：

import { MapComponent, MapController, MapOptions, MapStatus, MapUIOperateModel} from "@bdmap/map";

mapController: MapController | null = null;
mapOpt: MapOptions = new MapOptions({
    mapStatus: new MapStatus({ zoom: 16 })
});
mapUIOperateModel: MapUIOperateModel = new MapUIOperateModel()

比例尺控件设置、百度logo控件设置、缩放控件设置、地图审图控件设置

aboutToAppear(): void {
    // 地图审图控件
    this.mapUIOperateModel.getCopyright()
        .setShow(false)
        .setAlignment(Alignment.BottomStart)
        .setX('42px')
        .setY('0px')
}

MapComponent({
    onReady: (err, controller) => {
       if (!err) {
         this.mapController = controller
         // 比例尺控件
         this.mapUIOperateModel.getZoom()
            .setShow(true)  // 是否显示
            .setAlignment(Alignment.BottomEnd)  // 对齐方式
            .setX('-42px')  // x方向距离
            .setY('-175px')  // y方向距离
          // 缩放控件
         this.mapUIOperateModel.getScaleView()
            .setShow(true)
            .setAlignment(Alignment.BottomStart)
            .setX('262px')
            .setY('-42px')
          // 百度logo控件
          this.mapUIOperateModel.getLogo()
            .setShow(true)
            .setAlignment(Alignment.BottomStart)
            .setX('42px')
            .setY('-42px')
       }
     }, mapOptions: this.mapOpt, mapUIOperate: this.mapUIOperateModel
}).width('100%').height('100%')

地图控件采用鸿蒙emitter事件机制进行控制，emit数据结构如下：

{
    data:{
         mapViewId: string, // 地图标识
         x: number, // x方向距离
         y: number, // y方向距离
         Alignment: Alignment, // 对齐方式
         show: boolean // 是否显示
    }
}

相关引入如下：

import { Event as EmitEvent } from '@bdmap/map';
import emitter from '@ohos.events.emitter';

通过data的show和mapViewId字段进行控制。地图logo控件不支持设置不显示。

MapComponent({ onReady: async (err, mapController) => {
    if (!err) {
        // 获取地图的控制器类，用来操作地图
        this.mapController = mapController;
        emitter.emit({ eventId: EmitEvent.LocationCom }, {
            data: {
                show: true,
                mapViewId: this.mapController?.mapViewId
            }
        })
        emitter.emit({ eventId: EmitEvent.ScaleCom }, {
            data: {
                show: true,
                mapViewId: this.mapController?.mapViewId
            }
        })
        emitter.emit({ eventId: EmitEvent.ZoomCom }, {
            data: {
                show: true,
                mapViewId: this.mapController?.mapViewId
            }
        })
        emitter.emit({ eventId: EmitEvent.Copyright }, {
            data: {
                show: true,
                mapViewId: this.mapController?.mapViewId
            }
        })
    }
}, mapOptions: this.mapOpt}).width('100%').height('100%')

通过data的x、y、Alignment和mapViewId字段进行控制。

MapComponent({ onReady: async (err, mapController) => {
    if (!err) {
        // 获取地图的控制器类，用来操作地图
        this.mapController = mapController;
        emitter.emit({ eventId: EmitEvent.LocationCom }, {
            data: {
                show: true,
                mapViewId: this.mapController?.mapViewId,
                y:  -200
            }
        })
        emitter.emit({ eventId: EmitEvent.ScaleCom }, {
            data: {
                show: true,
                mapViewId: this.mapController?.mapViewId,
                y: -200
            }
        })
        emitter.emit({ eventId: EmitEvent.ZoomCom }, {
            data: {
                show: true,
                mapViewId: this.mapController?.mapViewId,
                y: -200
            }
        })
         emitter.emit({ eventId: EmitEvent.Copyright }, {
            data: {
                show: true,
                mapViewId: this.mapController?.mapViewId,
                y: -50
            }
        })
        emitter.emit({ eventId: EmitEvent.LogoCom }, {
            data: {
                mapViewId: this.mapController?.mapViewId,
                width: `120px`,
                height: `40px`,
                x: "20px",
                y: '-80px',
                Alignment: Alignment.BottomStart
            }
        })
     }
}, mapOptions: this.mapOpt}).width('100%').height('100%')