SymbolLayer标记鼠标悬停弹窗实现及TextOptions用途咨询

关于TextOptions能否实现悬停弹窗 #

不能通过SymbolLayerOptions.TextOptions实现鼠标悬停时的动态文本弹窗。

TextOptions属性的用途 #

TextOptions是用来配置SymbolLayer上常驻显示的静态文本标签的——简单说就是让标记自带固定显示的文字信息，这些文本会一直和标记一起展示在地图上，并非用来实现悬停触发的动态弹窗。

你可以通过它设置文本的样式细节：比如字体大小、颜色、字重，还能配置文本相对于标记的偏移量、对齐方式；也可以绑定数据源的字段，让每个标记显示专属的静态文本（比如地点名称、ID编号）。

实现悬停弹窗的正确方式（用MouseEnter/MouseLeave事件） #

你可以通过监听SymbolLayer的鼠标事件来实现自定义的两行文本弹窗，步骤如下：

• 先创建一个自定义的弹窗DOM元素，初始设为隐藏；
• 监听mouseenter事件：获取当前标记的专属两行文本，把内容塞进弹窗，再根据鼠标位置或标记坐标调整弹窗位置，最后显示弹窗；
• 监听mouseleave事件：隐藏弹窗。

举个简单的代码示例：

// 创建弹窗元素
const popup = document.createElement('div');
popup.style.cssText = `
  position: absolute;
  background: #fff;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: none;
  pointer-events: none;
  z-index: 1000;
`;
document.body.appendChild(popup);

// 鼠标进入标记时触发
symbolLayer.on('mouseenter', (event) => {
  // 从标记的属性中获取两行文本（假设数据源里有line1和line2字段）
  const { line1, line2 } = event.features[0].properties;
  // 设置弹窗内容
  popup.innerHTML = `<p>${line1}</p><p>${line2}</p>`;
  // 根据鼠标像素位置定位弹窗
  popup.style.left = `${event.pixel[0] + 15}px`;
  popup.style.top = `${event.pixel[1] + 15}px`;
  // 显示弹窗
  popup.style.display = 'block';
});

// 鼠标离开标记时触发
symbolLayer.on('mouseleave', () => {
  // 隐藏弹窗
  popup.style.display = 'none';
});

内容的提问来源于stack exchange，提问作者David Thielen