绘制点标记 最后更新时间: 2024年08月01日

点标记用来在地图上标记任何位置，例如用户位置、车辆位置、店铺位置等一切带有位置属性的事物。

绘制默认 Marker

绘制 Marker 的代码如下

let options: MarkerOptions = new MarkerOptions();
options.setPosition(new LatLng(39.992520, 116.336170));
let marker = aMap.addMarker(options);

Marker 常用属性

绘制自定义 Marker

可根据实际的业务需求，在地图指定的位置上添加自定义的 Marker。MarkerOptions 是设置 Marker 参数变量的类，自定义 Marker 时会经常用到。

下面以自定义 Marker 图标为例进行代码说明：

// add Marker
let options: MarkerOptions = new MarkerOptions();
let bitmapDes = await BitmapDescriptorFactory.fromRawfilePath(globalContext, "location_map_gps_locked.png");
if (bitmapDes) {
  options.setIcon(bitmapDes);
}
options.setTitle('标记'); //设置标记的标题
options.setSnippet('详细信息') //设置标记的文字描述
options.setPosition(new LatLng(39.992520, 116.336170));
let marker1 = this.aMap?.addMarker(options);

绘制多个 Marker

let options1: MarkerOptions = new MarkerOptions().setPosition(new LatLng(39.992520, 116.336170)).setIcon(new BitmapDescriptor($rawfile('location_map_gps_locked.png'), 'location_map_gps_locked', 100, 100));
let options2: MarkerOptions = new MarkerOptions().setPosition(new LatLng(40.02380181476392, 116.43124537956452)).setIcon(new BitmapDescriptor($rawfile('location_map_gps_locked.png'), 'location_map_gps_locked', 100, 100));
let markerOptionsList: ArrayList<MarkerOptions> = new ArrayList<MarkerOptions>()
markerOptionsList.add(options1);
markerOptionsList.add(options2);
let markers = aMap.addMarkers(markerOptionsList, false);

移除 Marker

aMap.removeOverlay(marker.getId());

可触发的 Marker 事件

Marker 点击事件

aMap.setOnMarkerClickListener((marker: Marker): boolean => {
  // marker 被点击的 marker 对象
  // 返回true表示已处理点击事件，不再继续传递；返回false则继续传递
  console.log(marker.getId());
  return true
})

Marker 拖拽事件

//当 marker 开始被拖动时回调此方法, 这个 marker 的位置可以通过 getPosition() 方法返回。
// 这个位置可能与拖动的之前的 marker 位置不一样。
// marker 被拖动的 marker 对象。
const onMarkerDragStart = (marker: Marker): void => {
  // 处理拖动开始
  // marker 被拖动的 marker 对象
  // marker 的位置可以通过 getPosition() 方法返回
}
const onMarkerDrag = (marker: Marker): void => {
  // 处理拖动中
  // marker 被拖动的 marker 对象
  // marker 的位置可以通过 getPosition() 方法返回
}
const onMarkerDragEnd = (marker: Marker): void => {
  // 处理拖动结束
  // marker 被拖动的 marker 对象
  // marker 的位置可以通过 getPosition() 方法返回
}

// marker 拖动事件监听接口实例
const dragListener: OnMarkerDragListener = new OnMarkerDragListener(onMarkerDragStart, onMarkerDrag, onMarkerDragEnd);

//给 aMap 设置标记拖动监听器 
aMap.setOnMarkerDragListener(dragListener)

关于 InfoWindow 的设置

InfoWindow 是点标记的一部分，默认的 Infowindow 只显示 Marker 对象的两个属性，一个是 title 和另一个 snippet。

常用属性