原生HTML无法实现多点标记，必须依赖JS地图SDK；Leaflet+OSM适合轻量验证，国内上线需用高德/百度地图并注意坐标系、HTTPS及事件绑定细节。
原生 HTML 不能直接做多点标记——<img alt="HTML怎么做地图多点标记_html地图多个地点标记方法【通俗易懂】" > 或 <div> 没有地理坐标系、缩放响应、点击事件绑定能力，所有“HTML 地图多点标记”实际都是靠 JS 地图 SDK 渲染的。
<h3>为什么直接写 HTML 标签加定位不行</h3>
<p>用 <code>position: absolute 在 <img src="map.png" alt="HTML怎么做地图多点标记_html地图多个地点标记方法【通俗易懂】" > 上盖 <span></span> 模拟标记，看似简单，但会立刻暴露三个硬伤：
- 经纬度坐标无法映射到图片像素——不同缩放级别下，同一地点像素位置完全不同
- 移动端视口变化、横竖屏切换时，所有标记全部错位
- 点击、拖拽、弹窗、聚类等交互功能完全缺失，后期没法扩展
这不是“不够好”，而是技术路径错误。别在静态方案上调试样式，先选对地图引擎。
Leaflet + OpenStreetMap 快速跑通多点标记
适合验证逻辑、内部工具、无商用要求的轻量场景。不需申请 key，CDN 一行引入就能跑：
立即学习“前端免费学习笔记（深入）”；
<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>
关键实操点：
-
id="map"容器必须设明确高度（如height: 500px），父元素不能是height: auto - 经纬度顺序是
[lat, lng]，不是[lng, lat]；写反了标记会出现在南极附近 - 批量加点用
forEach或map()创建L.marker()实例，再逐个.addTo(map)
示例片段：
const map = L.map('map').setView([39.9042, 116.4074], 13);
L.tileLayer('https://{a-d}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
const points = [
{ lat: 39.9042, lng: 116.4074, name: '北京站' },
{ lat: 39.913, lng: 116.397, name: '天坛' }
];
points.forEach(p => L.marker([p.lat, p.lng]).bindPopup(p.name).addTo(map));
国内上线项目必须用高德或百度地图
Leaflet + OSM 在国内加载慢、POI 少、部分区域瓦片缺失，且不支持 HTTPS 下的国产服务调用。上线前务必切换：
- 高德：注册后拿
key，用AMap.Map初始化，AMap.Marker加点，注意position: [lng, lat]（和 Leaflet 相反） - 百度：需申请
ak，用BMap.Map，但坐标系是 BD-09——GPS 原始数据（WGS-84）必须转换，否则整体偏移 500 米 - 两者都强制要求 HTTPS 环境：
http://页面下AMap is not defined或静默失败
高德批量加点典型写法：
const map = new AMap.Map('container', { zoom: 13, center: [116.4074, 39.9092] });
const markers = pois.map(p =>
new AMap.Marker({ position: [p.lng, p.lat], label: { content: p.name } })
);
map.addMarkers(markers); // 注意是 addMarkers()，不是 addMarker()
标记点了但点击没反应？先查这三处
这是最常卡住开发者的环节，问题往往不在地图初始化，而在事件绑定细节：
-
bindPopup()或on('click', ...)挂在了map或L.layerGroup上，而不是每个L.marker()实例本身 - CSS 的
z-index把弹窗压在底下了——Leaflet 默认 popupz-index是 600，Bootstrap 等框架可能覆盖它 - 地图容器父元素设置了
overflow: hidden，而 Leaflet 的 popup 是绝对定位插入到下的，会被最近的overflow: hidden父级截断
真正麻烦的不是加点，而是坐标系、网络环境、DOM 层级这三个地方的隐性耦合——改一个参数，可能要同时动 HTML 结构、JS 初始化、CSS 规则。
