Marker标记支持添加、移除、点击事件等。

Marker的 icon图标通过ImageEntity对象设置。

import { MapController, Marker, ImageEntity, LatLng } from '@bdmap/map';

mapController: MapController |null = null

let marker = new Marker({
    position: new LatLng(39.904835, 116.403119),
    icon: new ImageEntity("rawfile://marker.png")
});
// 在地图上添加Marker，并显示
this.mapController?.addOverlay(marker);
// 移除Marker
this.mapController?.removeOverlay(marker);

import { OverlayEvent, Marker } from '@bdmap/map';

marker: Marker | null = null;

this.marker?.addEventListener(OverlayEvent.CLICK, () => {
    console.log('EVENT handleTouchSingle===click marker1 ');
});

碰撞策略通过枚举CollisionBehavior设置，锚点位置通过枚举Located设置。

import { MapController, Marker, ImageEntity, SysEnum, LatLng } from '@bdmap/map';

mapController: MapController | null = null;

let marker = new Marker({
    position: new LatLng(39.904835,116.403119),
    isJoinCollision: SysEnum.CollisionBehavior.NOT_COLLIDE,
    located: SysEnum.Located.TOP,
    icon: new ImageEntity('rawfile://bg.png')
});
this.mapController?.addOverlay(marker);

从2.0.0版本开始，不再支持InfoWindow覆盖物类型，请使用PopView进行信息框开发。

有两种设置Marker信息框的方式：一种是附加 InfoWindow 形式，一种是附加PopView的形式。

推荐使用第二种方式，UI形式更加灵活，功能更加全面。

第一种

let infoWin = new InfoWindow({
    anchorX: 0.5,
    anchorY: 0,
    content: new ImageEntity(pixmap,width,height)
})
infoWin.addEventListener(OverlayEvent.CLICK,()=>{
    promptAction.showToast({
        message: '信息框点击',
        duration: 2000,
    });
});
this.marker?.setInfoWindow(infoWin);

第二种

import { MapController, Marker, ImageEntity, SysEnum, LabelUI, CommonEvent, TextStyle, PopView } from '@bdmap/map';

mapController: MapController | null = null;
marker: Marker | null = null;

let image = new ImageEntity('rawfile://start.png');
this.marker = new Marker({
    position: new LatLng(39.904835, 116.403119),
    icon: image,
    located: SysEnum.Located.BOTTOM
});
/** PopView */
{
    let layout = new HorizontalLayout();
    layout.setBackground(new ImageEntity("rawfile://pop_bottom.png"),{
        scaleX: [20,40,100,120],
        scaleY: [40,80],
        fillArea: [20,120,20,80]
    })
    let label = new LabelUI();
    label.setGravity(SysEnum.Gravity.GRAVITY_CENTER);
    label.setText("#BmMarker# 百度地图");
    label.setBackgroundColor('rgba(255,235,59,0.5)');
    label.setPadding(20, 0, 0, 0);
    label.setClickable(false);
    label.addEventListener(CommonEvent.CLICK,(e:EventUIBundle)=>{
    })
    let txtStyle =  new TextStyle();
    txtStyle.setTextColor('rgba(255,0,255,1)');
    txtStyle.setTextSize(28);
    txtStyle.setFontOption(SysEnum.FontOption.BOLD);

    label.setStyle(txtStyle);
    layout.addView(label);
    let popView = this.popView = new PopView();
    popView.setVisibility(SysEnum.Visibility.VISIBLE);
    popView.setView(layout);
    popView.setLocated(SysEnum.Located.TOP);
    popView.addEventListener(CommonEvent.CLICK,(e:EventUIBundle)=>{
    })
    // 附加PopView
    this.marker?.setPopView(popView);
}
this.mapController?.addOverlay(this.marker);

一、图片资源预先处理

使用ImageEntity对象时，可首先通过getBitmap()判断是否已经存在图像解析资源，如果不存在，则通过getArrayBuffer(callback?: Callback<ArrayBuffer>)进行生成后，再使用此对象。如果存在多个ImageEntity对象，则参考下面fetchAllImages示例代码逻辑进行处理。

fetchAllImages(input:ImageEntity|Array<ImageEntity>,callback: Function){
    let imageList:Array<ImageEntity> = Array.isArray(input)?input:[input];
    let proList: Array<Promise<void>> = [];

    imageList.forEach(item=>{
      let pro = new Promise<void>((resolve,reject)=>{
        if(!item.getBitmap()){
          item.getArrayBuffer(()=>{
            resolve();
          })
        }else{
          resolve();
        }
      });
      proList.push(pro);
    });

    Promise.all(proList).then(()=>{
      callback.bind(this)();
    });
  }

二、减少地图渲染更新频率

数据添加到地图前，可通过使用OverlayLayer图层对象的pauseCommit()暂停主动提交对象渲染更新，当数据添加完毕后，再通过resumeCommit()恢复主动提交对象渲染更新。

三、示例代码

mainTask(){
    this.image = new ImageEntity('rawfile://your-image-url.png');
    this.fetchAllImages(this.image,()=>{
        this.addMarker();
    });
}
              
addMarker(){
    if(!this.mapController){
      return;
    }
    let overlayLayer = this.mapController.getOverlayLayer();
    overlayLayer.pauseCommit();
    let lng = 116.403119;
    for(let i = 30; i>0;i--){
      for(let j = 30; j>0;j--) {
        let marker = new Marker({
          position: new LatLng(39.904835 + i * 0.05, lng + j * 0.05),
          icon: this.image as ImageEntity
        });
        this.mapController?.addOverlay(marker);
      }
    }
    overlayLayer.resumeCommit();
  }

操作流程：长按Marker触发拖动开始；移动手指到目标位置；抬起手指，完成拖放。

具体通过setDraggable(enable:Boolean)方法设置是否允许被拖动，通过addDragListener(listener:OverlayDragListener)方法设置Marker拖动回调事件。

参考示例代码如下：

@Component
export struct DraggableMarker {
    mapController: Maybe<MapController>;
    points: Array<LatLng> = [new LatLng(39.95033459580572,116.38188371611014), new LatLng(39.99449376883313,116.38314134382411)];
    markers: Array<Marker> = [];
      
    showMarker(){
        if(!this.mapController) return;
        this.markers = this.points.map((point, index) => {
          let marker = new Marker({
            position: point
          })
          marker.addDragListener(new MarkerDrag());
          this.mapController?.addOverlay(marker);
          return marker;
        })
    }
    
    changeEnableDrag(enable: boolean) {
        this.markers.forEach(marker => {
          marker.setDraggable(enable);
        })
    }
    
    build() {
        Stack({ alignContent: Alignment.TopStart }) {
          Column() {
            Row() {
              Button('可拖动', { type: ButtonType.Capsule, stateEffect: true })
                .onClick(() => {
                  this.changeEnableDrag(true);
                }).borderRadius(8)
                .backgroundColor(0x317aff)
                .margin(5)
              Button('不可拖动', { type: ButtonType.Capsule, stateEffect: true })
                .onClick(() => {
                  this.changeEnableDrag(false);
                }).borderRadius(8)
                .backgroundColor(0x317aff)
                .margin(5)
            }
            Row(){
              Text("长按地图上的Marker，图标变大后开始拖动，拖到目标位置，抬起手指，完成Marker拖动").margin(5).fontSize(12)
            }
          }.zIndex(10).width('100%').backgroundColor('#f3f3f3').justifyContent(FlexAlign.Center)
    
          MapComponent({
            onReady: (e, mapController: MapController) => {
              if (mapController) {
                this.mapController = mapController;
                this.showMarker();
              }
            },
           mapOptions: new MapOptions({
              mapStatus: new MapStatus({
                center: new LatLng(39.97033459580572, 116.38188371611014),
                zoom: 14
              })
            })
          }).width('100%').height('100%')
        }.width('100%').height('100%')
      }
 }

export class MarkerDrag implements OverlayDragListener {
  dragStart(overlay: Marker, ev: OverlayDragEvent) {
    console.log('MarkerDrag::dragStart');
    overlay.setScale(2,2);
  }
  dragMove(overlay: Marker, ev: OverlayDragEvent) {
    console.log('MarkerDrag::dragMove', JSON.stringify(ev));
  }
  dragEnd(overlay: Marker, ev: OverlayDragEvent) {
    console.log('MarkerDrag::dragEnd');
    overlay.setScale(1,1);
  }
}