开发 HarmonyOS NEXT 地图SDK 开发指南 在地图上绘制 绘制点标记

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

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

绘制默认 Marker

绘制 Marker 的代码如下

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

Marker 常用属性

名称

说明

setPosition /getPosition

设置/获取标记位置在地图上的经纬度值

setTitle /getTitle

设置/获取标记的标题

setSnippet/getSnippet

设置/获取标记的文字描述

setDraggable/getDraggable

设置/获取标记是否可拖拽

setVisible/getVisible

设置/获取点标记是否可见

setAnchor

设置标记的锚点比例。锚点标记图标接触地图平面的点。图标的左顶点为(0,0)点,右底点为(1,1)点,默认为(0.5,1.0)

绘制自定义 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 的图标时,相同图案 icon 的 Marker 最好使用同一个BitmapDescriptor对象以节省内存空间,

绘制多个 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。

常用属性

名称

参数类型

说明

setInfoWindowEnable(enabled)

boolean

设置 Marker 覆盖物的 InfoWindow 是否允许显示,默认为 true

true:允许显示,false:不允许显示

setInfoWindowOffset(offsetX, offsetY)

number

设置 Marker 覆盖物的 InfoWindow 相对 Marker 的偏移

offsetX:InfoWindow 相对原点的横向像素偏移量,单位:像素

offsetY:InfoWindow 相对原点的纵向像素偏移量,单位:像素

autoOverturnInfoWindow(autoOverturn)

boolean

设置Marker覆盖物的InfoWindow是否自动旋转

true:表示自动翻转,false:表示不自动翻转

showInfoWindow()

显示 InfoWindow

hideInfoWindow()

隐藏 InfoWindow

返回顶部 示例中心 常见问题 智能客服 公众号
二维码