本文详解因html结构不当引发的`
该问题的核心并非JavaScript逻辑错误，而是HTML渲染层的布局塌陷与行内元素间隙干扰。从您提供的代码可见：多个标签（如#base、#bh、#mariana等）被分别插入，且极可能存在于不同段落或被
分隔——这会导致浏览器为每个分配独立的行框（line box），并因默认vertical-align: baseline产生不可见的底部间隙。当mouseover触发show()/hide()时，DOM可见性切换会引发重排（reflow），图像高度微变 → 坐标映射失效 → “热区漂移”，表现为鼠标难以持续悬停、图像跳动。
✅ 正确解决方案（三步到位）：
-
统一容器 + 移除换行干扰
将所有地图图片（基础图与四张高亮图）包裹在同一个中，并设置position: relative；所有设为position: absolute; top: 0; left: 0;，使其完全重叠：
<div id="map-container" style="max-width:90%"> <img id="base" src="/images/map-base.png" usemap="#legenda" alt="Mapa base" style="max-width:90%"> <img id="bh" src="/images/map-bh.png" usemap="#legenda" alt="Rota BH" style="max-width:90%"> <img id="mariana" src="/images/map-mariana.png" usemap="#legenda" alt="Rota Mariana" style="max-width:90%"> <img id="ob" src="/images/map-ob.png" usemap="#legenda" alt="Rota OB" style="max-width:90%"> <img id="transfer" src="/images/map-transfer.png" usemap="#legenda" alt="Rota Transfer" style="max-width:90%"> </div>
-
修正JavaScript逻辑（防抖 + 显式隐藏）
原脚本在mouseout时直接hide()当前图并show()基础图，但若鼠标快速划过相邻区域，可能触发多次切换造成抖动。建议改用mouseenter/mouseleave，并确保每次只显示一张图：
$('#legenda area').on('mouseenter', function(e) { e.preventDefault(); const targetId = "#" + $(this).attr('alt'); // 隐藏所有高亮图，显示对应图 $('#map-container img[id!="base"]').hide(); $(targetId).show(); $('#base').hide(); }).on('mouseleave', function() { // 恢复基础图（可选：添加延迟避免误触） $('#map-container img[id!="base"]').hide(); $('#base').show(); });-
增强可用性：解耦操作入口
如答案所建议，将四个彩色方块（色块按钮）移出图像区域，置于地图下方或侧边栏，用语义化按钮替代热区：
<div class="map-controls"> <button type="button" data-route="bh">? Belo Horizonte</button> <button type="button" data-route="mariana">? Mariana</button> <button type="button" data-route="ob">? Ouro Branco</button> <button type="button" data-route="transfer">? Transfer</button> </div>
对应JS改为绑定按钮事件，彻底规避
Java 接口排错助手下载在调试 Java 后端 API 故障时使用此技能，尤其适用于以下任务：分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转，以及生成简洁的诊断结论与修复方案。
⚠️ 注意事项：
- 确保所有地图PNG尺寸严格一致（推荐导出为相同宽高像素），否则absolute定位仍会错位；
- imageMapResize()需在所有图片加载完成后调用（可监听window.onload或使用$(window).on('load', ...)）；
- 若使用响应式设计，建议配合CSS媒体查询重置坐标，或改用SVG矢量地图（更现代、更稳定）。
通过以上结构重构与交互优化，即可彻底消除闪烁与热区漂移，交付专业级的地图交互体验。
-
修正JavaScript逻辑（防抖 + 显式隐藏）
