用 嵌入静态地图 URL（如高德/百度静态图 API），配合 列表展示网点信息，零依赖、轻量高效；注意坐标顺序、参数拼写、响应式 CSS 和语义化结构。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
怎么用 HTML 嵌入静态地图并同步显示网点列表
直接用 <img alt="HTML怎么显示服务网点地图_HTML静态地图+列表双显【操作】" > 加 src 指向地图图片 URL，再配一个 <ul></ul> 或 <table> 列表——这是最轻量、零依赖的方案。适合不需要交互、不常更新、纯展示的场景（比如官网「联系我们」页）。
<p>常见错误是硬塞一个 iframe 调用在线地图 SDK（如高德/百度 JS API），结果页面加载慢、跨域报错、甚至被 CSP 拦截；或者用 Canvas 手动画点，徒增复杂度还难维护。</p>
<ul>
<li>地图图源优先选「静态图 API」：高德有 <code>https://restapi.amap.com/v3/staticmap，百度有 http://api.map.baidu.com/staticimage，都支持传坐标、缩放、标记点、尺寸等参数
<div class="poi-list">），或用 <code>fetch() 加载 JSON，但别用 jQuery.ajax —— 现代浏览器原生 fetch 更稳
静态地图 URL 参数怎么拼才不出错
URL 是核心，拼错一个参数，图就白请求。重点盯三个：坐标、标记、尺寸。
比如高德静态图，必须带 key，且 location 是逗号分隔的「经度,纬度」，多个点用竖线 | 连接；而 markers 参数里的颜色和大小要符合格式（如 mid|A:116.48,39.99|B:116.47,39.98）。
立即学习“前端免费学习笔记（深入）”；
-
zoom推荐设为14–16：太小看不清网点分布，太大只显一两个点 -
size别写死像素值（如600*400），用响应式单位更稳妥，CSS 里加max-width: 100%; height: auto; - 中文地址不用传给静态图 API——它不认；标记点只靠坐标，文字说明全靠你自己的列表来补
HTML 里怎么让地图和列表联动（不写 JS 也能对齐）
真不想写 JS，就靠结构 + CSS 对齐。把地图和列表包进同一个容器，用 Flex 或 Grid 控制流向和间距，视觉上就是“双显”。
容易踩的坑是列表项用 <li> 但没清掉默认 margin/padding，导致和图片错位；或者地图 <img alt="HTML怎么显示服务网点地图_HTML静态地图+列表双显【操作】" > 缺 alt 属性，影响可访问性，也容易被 SEO 工具标为问题。
- 推荐结构：
<div class="map-and-list"><img src="..." alt="服务网点分布图"><div class="poi-list"><h4>北京朝阳区</h4><p>建国路88号</p></div></div></li> <li>CSS 用 <code>display: flex; flex-direction: column;
（竖排）或flex-direction: row;（横排），加gap: 1rem;控制间距 - 列表每项加
data-lat和data-lng属性，后续万一要加点击跳转地图，就有数据基础，不用重爬 HTML
为什么不用 Leaflet 或 Mapbox（哪怕只显示几个点）
因为它们本质是运行时渲染的地图引擎，需要下载 JS、初始化地图实例、处理投影、监听事件……而你的需求只是「显示固定位置+对应文字」，相当于用挖掘机挖蚯蚓。
性能差异明显：静态图单次 HTTP 请求（20–100KB），Leaflet 页面至少多加载 300KB+ JS/CSS，首屏时间拖长 1–2 秒；移动端弱网下，JS 加载失败，地图区域直接空白，列表还在，但用户不知道点对应哪。
- 兼容性：静态图
<img alt="HTML怎么显示服务网点地图_HTML静态地图+列表双显【操作】" >在 IE8 都能显示；Leaflet 最低支持 IE10，Mapbox 更高 - 维护成本：坐标改了，只需改 URL 参数或列表文本；换用 JS 地图，得调 API、改 marker 创建逻辑、测缩放行为
- 特别提醒：某些静态图服务对 QPS 有限制（如高德免费版 1000次/天），但官网展示页通常日均请求远低于这个数，不用提前焦虑
真正卡住的往往是坐标不准、参数漏签名、列表没按地理顺序组织——这些比选什么库重要得多。
