Leaflet中如何在鼠标悬停标记时同时显示提示框与图片？

当然可以在Tooltip里嵌入图片！Leaflet的bindTooltip()方法支持直接传入HTML内容，这就意味着你能轻松把文本和图片组合在一起，实现悬停时的富内容展示。

方案一：直接在Tooltip中嵌入HTML（最简便） #

你只需要把包含文本和<img>标签的HTML字符串传给bindTooltip()就行，还能自定义样式让展示更美观。举个实际的代码例子：

// 初始化地图（假设你已经有这部分代码）
const map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

// 创建标记并绑定带图片的Tooltip
const myMarker = L.marker([51.5, -0.09])
  .bindTooltip(`
    <div class="custom-tooltip">
      <p>*这是标记的文本说明*</p>
      <img src="your-image-path.jpg" alt="标记相关图片" style="width:120px; height:auto; margin-top:8px;">
    </div>`, {
    className: 'custom-tooltip', // 自定义类名，方便后续样式调整
    direction: 'top', // 设置Tooltip显示的方向，可选top/right/bottom/left
    offset: [0, -10] // 调整Tooltip和标记的距离，避免遮挡
  })
  .addTo(map);

然后可以给Tooltip加一些自定义CSS，让它看起来更舒服：

.custom-tooltip {
  background: #fff;
  padding: 10px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  font-size: 14px;
}
.custom-tooltip p {
  margin: 0;
  color: #333;
}

方案二：用Popup配合鼠标事件（适合复杂交互场景） #

如果你的展示内容需要更多交互（比如点击图片放大、添加按钮等），Tooltip的能力可能不够用，这时候可以用Popup配合鼠标mouseover/mouseout事件，实现“悬停显示Popup”的效果：

const myMarker = L.marker([51.5, -0.09])
  .bindPopup(`
    <div class="custom-popup">
      <h4>标记标题</h4>
      <p>详细的文本描述内容</p>
      <img src="your-image-path.jpg" alt="图片描述">
      <button onclick="doSomething()">点击操作</button>
    </div>`, {
    className: 'custom-popup',
    autoClose: false // 禁止点击地图关闭Popup，只通过鼠标离开关闭
  })
  .addTo(map);

// 鼠标悬停时打开Popup
myMarker.on('mouseover', function() {
  this.openPopup();
});

// 鼠标离开时关闭Popup
myMarker.on('mouseout', function() {
  this.closePopup();
});

这个方案的优势是Popup支持更复杂的HTML结构和交互逻辑，适合内容较多的场景。

总结 #

• 如果只是简单的文本+图片展示，**方案一（Tooltip嵌入HTML）**是最直接简便的选择，完全满足你的需求；
• 如果需要更丰富的交互或更大的展示区域，**方案二（Popup+鼠标事件）**会更合适。

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