弹窗管理

弹窗是地图上的信息窗口，用于显示点位的详细信息或交互内容。

addPopup

添加弹窗到地图。

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

参数说明

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

PopupOptions 详细配置

选项	类型	默认值	必填	描述
coordinate	[number, number]		是	弹窗坐标 [经度, 纬度]
addMap	boolean	false	否	是否添加进地图
domContent	Node		否	DOM结构内容
html	string		否	富文本
text	string		否	文本内容
show	boolean	false	否	显示隐藏弹窗
pointerEvents	boolean	true	否	弹窗响应鼠标事件
altitude	number		否	海拔
closeButton	boolean	true	否	弹窗关闭按钮
closeOnClick	boolean	true	否	弹窗点击地图关闭
closeOnMove	boolean	false	否	弹窗移动地图关闭
focusAfterOpen	boolean	true	否	弹窗打开时是否聚焦
anchor	string		否	弹窗锚点
className	string		否	弹窗样式类名
offset	[number, number]		否	弹窗偏移量
maxWidth	string	'300px'	否	弹窗最大宽度

示例

// 添加简单弹窗
map.addPopup('info-popup', {
  html: '<div style="padding: 10px;">这是一个弹窗</div>',
  coordinate: [116.397228, 39.907556],
  offset: [0, -10],
  addMap: true,
  show: true
})

// 添加带样式的弹窗
map.addPopup('styled-popup', {
  html: '<div class="custom-popup">详细信息：<br>这里是自定义内容</div>',
  coordinate: [116.4, 39.9],
  maxWidth: '400px',
  className: 'my-popup-class',
  closeButton: false,
  addMap: true
})

getPopup

获取指定的弹窗实例。

/**
 * 获取弹窗
 * @param {string} key - 唯一标识
 * @returns {PopupOverlay} - 弹窗实例
 */
getPopup(key)

参数说明

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

示例

const popup = map.getPopup('info-popup')
// 更新弹窗内容
popup.setContent('<div>更新后的内容</div>')

removePopup

移除弹窗。

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

参数说明

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

示例

// 移除特定弹窗
map.removePopup('info-popup')

// 移除所有弹窗
map.removePopup()

setPopupVisibility

设置弹窗的可见性。

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

参数说明

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

示例

// 显示特定弹窗
map.setPopupVisibility('visible', 'info-popup')

// 隐藏特定弹窗
map.setPopupVisibility('none', 'info-popup')

// 显示所有弹窗
map.setPopupVisibility('visible')

弹窗操作示例

// 添加弹窗
map.addPopup('point-info', {
  html: '<div>点击标记显示详情</div>',
  coordinate: [116.397228, 39.907556],
  show: false,
  addMap: true
})

// 添加标记
map.addMarker('point-marker', {
  coordinate: [116.397228, 39.907556],
  addMap: true
})

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

// 点击地图其他位置关闭弹窗
map.instance.on('click', (e) => {
  // 检查点击位置是否是标记
  const features = map.instance.queryRenderedFeatures(e.point, {
    layers: ['marker-layer']
  })
  if (features.length === 0) {
    map.setPopupVisibility('none', 'point-info')
  }
})

常见问题

1. 弹窗不显示：检查弹窗是否设置了 position，确保坐标在地图可视范围内。

2. 弹窗样式问题：使用 className 参数自定义样式，或检查全局 CSS 是否影响弹窗样式。

3. 弹窗关闭问题：确保 closeButton 和 closeOnClick 参数设置正确。

4. 弹窗内容更新：使用 getPopup 获取实例后，调用 setContent 方法更新内容。