Windy地图标记下方添加永久可见Tooltip技术求助

嗨，我来帮你搞定这个需求～Windy默认的Marker组件没有直接提供永久显示tooltip的选项，但我们可以通过自定义Marker元素的方式轻松实现，让文本一直显示在Marker下方，不用点击触发。下面是具体的实现步骤和代码：

1. 核心思路 #

我们自己创建一个包含图标和文本的DOM元素，作为自定义Marker，然后通过Windy的API把这个元素添加到地图上，这样就能完全控制Marker的显示效果，包括让文本始终可见。

2. JS代码实现 #

假设你已经完成了Windy地图的初始化（比如通过windyInit方法），在添加Marker时，我们传入自定义的DOM元素即可：

// 初始化Windy地图（替换成你的API密钥和配置）
windyInit({
    key: '你的Windy API密钥',
    // 其他初始化参数（比如默认地图层级、中心坐标等）
}, (windyAPI) => {
    const { map } = windyAPI;

    // 1. 创建自定义Marker的DOM容器
    const customMarker = document.createElement('div');
    customMarker.className = 'custom-windy-marker';
    
    // 添加Marker图标（这里模拟Windy默认的红色标记样式）
    const markerIcon = document.createElement('div');
    markerIcon.className = 'marker-icon';
    
    // 添加要永久显示的文本
    const markerText = document.createElement('div');
    markerText.className = 'marker-text';
    markerText.textContent = '我的标记文本'; // 替换成你需要显示的内容
    
    // 把图标和文本组装到容器里
    customMarker.appendChild(markerIcon);
    customMarker.appendChild(markerText);

    // 2. 将自定义Marker添加到地图指定位置（示例：北京经纬度）
    map.marker([39.9042, 116.4074], {
        element: customMarker, // 传入我们的自定义元素
        draggable: false // 不需要拖拽的话设为false
    });
});

3. CSS样式调整 #

添加下面的CSS，确保文本在Marker图标下方，样式美观且不影响地图交互：

/* 自定义Marker容器，设置垂直排列让文本在图标下方 */
.custom-windy-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none; /* 避免文本区域遮挡地图的缩放、拖拽等交互 */
}

/* Marker图标样式（可以根据喜好修改颜色、大小） */
.marker-icon {
    width: 24px;
    height: 24px;
    background-color: #ff3333;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 3px rgba(0,0,0,0.3);
    pointer-events: auto; /* 让图标可以响应点击（如果需要的话） */
}

/* Marker下方的文本样式 */
.marker-text {
    margin-top: 4px;
    padding: 2px 6px;
    background-color: rgba(255,255,255,0.9);
    border-radius: 3px;
    font-size: 12px;
    color: #333;
    white-space: nowrap; /* 防止文本换行 */
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

小提示 #

• 你可以随意修改图标的样式（比如换成自己的图标图片）和文本的字体、背景色等，完全按照你的需求定制。
• 如果需要多个Marker，只要把创建自定义Marker的代码封装成函数，循环调用即可。

如果还有不清楚的地方，随时问我哦～

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