嘿，刚好碰到过类似的需求，给你整理了两个实用方案，直接就能上手！

要实现点击添加地图标记后，默认显示tooltip（无需悬停），本质就是让tooltip元素在创建完成时就处于可见状态，而不是等待鼠标hover事件触发显示逻辑。下面分两种场景给你代码示例：

如果是自己手写地图组件，完全可以用原生代码实现，灵活性拉满：

1. HTML结构 #

<!-- 模拟地图容器 -->
<div id="map-container" style="width: 800px; height: 600px; background: #e5e5e5; position: relative;"></div>
<button id="add-marker-btn">点击添加标记</button>

2. CSS样式 #

/* 地图标记样式 */
.map-marker {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ff4444;
  cursor: pointer;
  transform: translate(-50%, -50%); /* 让标记中心对准点击点 */
}

/* Tooltip默认隐藏，添加.show类后显示 */
.marker-tooltip {
  position: absolute;
  background: #333;
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  display: none;
  transform: translate(-50%, -120%); /* 把tooltip放在标记上方 */
  white-space: nowrap;
  z-index: 100;
}

.marker-tooltip.show {
  display: block; /* 默认添加这个类，让tooltip一开始就显示 */
}

/* 可选：给tooltip加个小三角装饰 */
.marker-tooltip::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px 6px 0;
  border-style: solid;
  border-color: #333 transparent transparent;
}

3. JS逻辑 #

const mapContainer = document.getElementById('map-container');
const addMarkerBtn = document.getElementById('add-marker-btn');

addMarkerBtn.addEventListener('click', () => {
  // 模拟地图上的随机点击坐标（实际项目中可以替换成用户点击地图的真实坐标）
  const clickX = Math.random() * mapContainer.offsetWidth;
  const clickY = Math.random() * mapContainer.offsetHeight;

  // 创建地图标记元素
  const marker = document.createElement('div');
  marker.className = 'map-marker';
  marker.style.left = `${clickX}px`;
  marker.style.top = `${clickY}px`;

  // 创建Tooltip元素，这里可以替换成你的`mapMarker.tooltipHTML`内容
  const tooltip = document.createElement('div');
  tooltip.className = 'marker-tooltip show'; // 关键：默认添加show类，直接显示
  tooltip.innerHTML = '<strong>默认显示的Tooltip</strong><br>不用鼠标悬停就能看到！';
  tooltip.style.left = `${clickX}px`;
  tooltip.style.top = `${clickY}px`;

  // 把标记和Tooltip添加到地图容器
  mapContainer.appendChild(marker);
  mapContainer.appendChild(tooltip);

  // 可选：点击标记时切换Tooltip的显示/隐藏
  marker.addEventListener('click', () => {
    tooltip.classList.toggle('show');
  });
});

如果你用的是Leaflet这类主流地图库，那就更简单了，官方API直接支持永久显示tooltip：

1. 基础代码（含地图初始化） #

<div id="map-container" style="width: 800px; height: 600px;"></div>
<button id="add-marker-btn">点击添加标记</button>

<!-- 引入Leaflet的CSS和JS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

2. JS逻辑 #

// 初始化地图
const map = L.map('map-container').setView([51.505, -0.09], 13);

// 添加瓦片图层（OpenStreetMap）
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© OpenStreetMap contributors'
}).addTo(map);

// 点击按钮添加标记和默认显示的Tooltip
document.getElementById('add-marker-btn').addEventListener('click', () => {
  // 用地图中心作为标记位置（实际可以替换成用户点击地图的坐标）
  const markerLatLng = map.getCenter();
  
  // 创建地图标记
  const marker = L.marker(markerLatLng).addTo(map);
  
  // 绑定Tooltip，关键参数是`permanent: true`，让Tooltip一直显示
  marker.bindTooltip('<strong>Leaflet默认显示Tooltip</strong><br>无需悬停！', {
    permanent: true, // 核心：设置为永久显示
    direction: 'top', // 设置Tooltip显示方向
    className: 'custom-tooltip' // 自定义样式类
  });
});

3. 可选自定义Tooltip样式 #

.custom-tooltip {
  background: #2c3e50;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 8px 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

不管是自定义实现还是用地图库，核心都是：

• 标记创建完成后，立即让Tooltip元素处于可见状态
• 自定义方案通过添加CSS类控制显示，地图库方案则利用官方提供的永久显示参数

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