标记管理

标记是地图上的点标记，用于标识特定位置或兴趣点。

addMarker

添加标记到地图。

/**
 * 添加标记
 * @param {string} key - 唯一标识
 * @param {thmap.MarkerOptions} options - 标记配置
 * @returns {ThMap} - 返回 this 以支持链式调用
 */
addMarker(key, options = {})

参数说明

参数	类型	描述
key	string	标记的唯一标识，用于后续操作该标记
options	thmap.MarkerOptions	标记的配置选项

MarkerOptions 详细配置

选项	类型	默认值	必填	描述
coordinate	[number, number]		是	位置坐标 [经度, 纬度]
addMap	boolean	false	否	是否添加进地图
show	boolean	false	否	显示隐藏
pointerEvents	boolean	true	否	响应鼠标事件
popup	Popup		否	弹窗
altitude	number		否	海拔
anchor	string		否	弹窗锚点
className	string		否	标记样式类名
offset	PointLike		否	标记偏移量
draggable	boolean	false	否	是否可以拖拽
element	HTMLElement		否	元素
rotation	number	0	否	旋转角度
rotationAlignment	string		否	旋转对齐方向
pitchAlignment	string		否	俯仰对齐
occludedOpacity	number		否	闭塞不透明

示例

// 添加简单标记
const markerIcon = document.createElement('img')
markerIcon.src = 'path/to/marker.png'
markerIcon.style.width = '30px'
markerIcon.style.height = '30px'

map.addMarker('point-marker', {
  coordinate: [116.397228, 39.907556],
  element: markerIcon,
  addMap: true
})

// 添加自定义 DOM 标记
const customIcon = document.createElement('div')
customIcon.style.width = '30px'
customIcon.style.height = '30px'
customIcon.style.backgroundColor = 'red'
customIcon.style.borderRadius = '50%'

map.addMarker('custom-marker', {
  coordinate: [116.4, 39.9],
  element: customIcon,
  draggable: true,
  addMap: true
})

getMarker

获取指定的标记实例。

/**
 * 获取标记
 * @param {string} key - 唯一标识
 * @returns {MarkerOverlay} - 标记实例
 */
getMarker(key)

参数说明

参数	类型	描述
key	string	标记的唯一标识

示例

const marker = map.getMarker('point-marker')
// 移动标记位置
marker.setPosition([116.4, 39.91])

removeMarker

移除标记。

/**
 * 移除标记
 * @param {string} [key] - 唯一标识，不提供则移除所有标记
 * @returns {ThMap} - 返回 this 以支持链式调用
 */
removeMarker(key)

参数说明

参数	类型	描述
key	string	可选，标记的唯一标识，不提供则移除所有标记

示例

// 移除特定标记
map.removeMarker('point-marker')

// 移除所有标记
map.removeMarker()

setMarkerVisibility

设置标记的可见性。

/**
 * 设置标记可见性
 * @param {layer.VisibilityEnum} visibility - 可见性状态 ('visible' 或 'none')
 * @param {string} [key] - 唯一标识，不提供则设置所有标记
 * @returns {ThMap} - 返回 this 以支持链式调用
 */
setMarkerVisibility(visibility, key)

参数说明

参数	类型	描述
visibility	'visible' | 'none'	可见性状态
key	string	可选，标记的唯一标识，不提供则设置所有标记

示例

// 显示特定标记
map.setMarkerVisibility('visible', 'point-marker')

// 隐藏特定标记
map.setMarkerVisibility('none', 'point-marker')

// 显示所有标记
map.setMarkerVisibility('visible')

标记操作示例

// 添加标记
const userMarkerIcon = document.createElement('img')
userMarkerIcon.src = 'path/to/user-marker.png'

map.addMarker('user-marker', {
  coordinate: [116.397228, 39.907556],
  element: userMarkerIcon,
  draggable: true,
  addMap: true
})

// 监听标记拖拽事件
const userMarker = map.getMarker('user-marker')
userMarker.on('dragend', (e) => {
  console.log('标记新位置:', e.lngLat)
  
  // 更新关联的弹窗位置
  const popup = map.getPopup('user-info')
  if (popup) {
    popup.setLngLat(e.lngLat)
  }
})

// 添加关联弹窗
map.addPopup('user-info', {
  content: '<div>用户位置</div>',
  position: [116.397228, 39.907556],
  offset: [0, -30]
})

// 点击标记显示弹窗
userMarker.on('click', () => {
  map.setPopupVisibility('visible', 'user-info')
})

常见问题

1. 标记不显示：检查标记是否设置了 position 和 icon，确保图标 URL 正确。

2. 标记拖拽问题：确保 draggable 参数设置为 true。

3. 标记层级：可以通过添加顺序或自定义 CSS 控制标记的显示层级。

4. 性能问题：对于大量标记，考虑使用批量添加或集群标记。