原生html+javascript无法实现真正的地图信息窗口，必须依赖地图sdk（如高德、google maps等），因其infowindow是api提供的带定位、跟随、交互能力的组件，纯css/js模拟会失效于缩放、旋转、无障碍等场景。
怎么用原生 HTML + JavaScript 实现地图信息窗口（InfoWindow）
纯 HTML 无法直接显示地图信息窗口——它必须依赖地图 SDK（如 Google Maps、Mapbox 或国内高德/百度地图），因为 InfoWindow 是地图 API 提供的 UI 组件，不是浏览器原生 DOM 元素。你写的 <div> 可以作为内容模板，但渲染、定位、关闭逻辑全由地图实例控制。
<p>常见错误是试图用 <code>position: absolute 手动把一个 <div> “贴”在地图上：它不会随地图缩放/拖动而同步移动，点击事件也对不上经纬度坐标。
<p>实操建议：</p>
<ul>
<li>选一个地图 SDK，注册对应平台的 Key（如高德需申请 <code>WebKey，Google 需开启 Maps JavaScript API）
Marker 的 click 事件触发 InfoWindow.open()，而不是监听 DOM 点击<div> 元素（注意：后者需确保不被重复 append）
<li>避免在循环中反复 new <code>InfoWindow 实例——应复用单个实例，只更新 setContent()
高德地图 JS API 中 InfoWindow 的正确写法
高德是最常用且中文文档友好的选择，AMap.InfoWindow 必须绑定到 AMap.Map 实例上才能生效，且不能脱离地图容器存在。
典型错误现象：InfoWindow is not defined（没引入插件）、Cannot read property 'open' of undefined（未 new 实例或未 setMap）。
关键点：
- 需显式加载插件：
AMap.plugin('AMap.InfoWindow', callback)（v2.x）或直接 import（v3.x） -
new AMap.InfoWindow({ content: '<div>地址：北京市朝阳区</div>' })，content 支持 HTML 字符串，但不要含 script 标签 - 打开时必须指定 anchor（通常是
marker）：infoWindow.open(map, marker.getPosition()) - 关闭用
infoWindow.close()，不要用removeChild()或display: none
Google Maps JS API 的 InfoWindow 注意事项
Google 的 google.maps.InfoWindow 对 DOM 生命周期更敏感，尤其在 React/Vue 等框架中容易因组件卸载导致内存泄漏或 setMap(null) 失败。
容易踩的坑：
- 未调用
infowindow.setMap(map)就调open()→ 无反应，控制台无报错 - 多次 open 同一个 InfoWindow 会覆盖前一次，但若未先 close，可能残留旧内容（建议每次 open 前
infowindow.close()） - content 传入 DOM 元素时，该元素会被自动 append 到地图容器内；若后续又手动
remove()它，InfoWindow 会丢失内容且不再渲染 - 移动端点击 marker 触发 InfoWindow 后，再拖动地图，InfoWindow 默认跟随 marker —— 这是预期行为，无需额外处理
为什么不用纯 CSS + JS 模拟 InfoWindow？
有人尝试用 getBounds() 计算经纬度转像素位置，再用 offsetTop/Left 把 div 定位过去。这在静态地图上看似可行，但实际问题密集：
- 地图缩放时，像素坐标非线性变化，
fromLatLngToContainerPixel才是正确转换方式（所有 SDK 都提供该方法） - 地图旋转、倾斜（如 Google 的 45° 视角）会让纯 CSS 定位完全失效
- InfoWindow 的箭头指向、阴影、z-index 层级、自动避让（avoid other markers）等功能，SDK 已封装，自己实现成本远高于接入 SDK
- 无障碍支持（aria-label、键盘焦点）和触摸反馈（移动端长按、双指缩放）几乎无法手工补齐
真正需要“轻量”的场景，优先考虑高德或 Mapbox 的精简版 SDK 加载策略（按需加载 InfoWindow 插件），而不是绕开地图 API 自己造轮子。
