html5本身不提供地图功能，需调用百度、高德、腾讯或leaflet等第三方api；标记多个poi须先初始化地图实例，再批量添加marker，并注意坐标系转换、异步加载顺序与移动端适配。
HTML5 本身不提供地图功能，必须用第三方地图 API
HTML5 没有内置的地图组件或 navigator.geolocation 之外的地理可视化能力。所谓“HTML5 调用地图”，实际是用 JavaScript 加载百度地图、高德地图、腾讯地图或 Leaflet + OpenStreetMap 等 SDK。标记多个兴趣点（POI）的关键在于：先初始化地图实例，再循环调用其 addOverlay（百度）、addMarker（高德）、或 marker.addTo(map)（Leaflet）等方法。
用高德地图 JS API 批量添加 Marker 的典型写法
高德地图是最常用且中文文档友好的选择。注意必须在 AMap.Map 初始化完成后再添加标记，否则 map 实例未就绪会导致 Cannot read property 'add' of undefined 错误。
- 确保已引入高德 JS SDK：
<script src="https://webapi.amap.com/maps?v=2.0&key=%E4%BD%A0%E7%9A%84KEY"></script> - 定义 POI 数据为数组，每个对象至少含
lng、lat和name字段 - 用
new AMap.Marker()构造单个标记，再用map.addMarker()批量注入（v2.0 推荐方式） - 避免在 for 循环中重复 new AMap.Map() —— 地图容器只能初始化一次
const map = new AMap.Map('container', { zoom: 13, center: [116.397428, 39.90923] });
const pois = [
{ lng: 116.397428, lat: 39.90923, name: '天安门' },
{ lng: 116.407428, lat: 39.90023, name: '王府井' }
];
const markers = pois.map(p =>
new AMap.Marker({ position: [p.lng, p.lat], label: { content: p.name } })
);
map.addMarkers(markers); // 注意：不是 map.addMarker(markers)
百度地图标记多个点时常见坐标系陷阱
百度地图使用 BD-09 坐标系，而 GPS 设备、高德、OpenStreetMap 默认输出的是 WGS-84 坐标。若直接把 GPS 原始经纬度传给百度 BMap.Marker，所有标记会整体偏移约 500 米（尤其在北京/上海明显）。必须显式转换：
- 用
BMap.Convertor异步转坐标（需额外加载http://api.map.baidu.com/library/Convertor/1.0/src/Convertor_min.js） - 或后端统一转好再传给前端（更稳定，避免 JS 转换失败无 fallback）
- 切勿假设
new BMap.Point(lng, lat)中的lng/lat是通用值 —— 百度只认 BD-09
Leaflet + OpenStreetMap 更轻量，但需手动处理弹窗和图标
Leaflet 不依赖商业 Key，适合快速原型或对数据源中立有要求的场景。但它默认不带中文底图和 POI 搜索，需自行接入 TileLayer（如 https://{a-d}.tile.openstreetmap.org/{z}/{x}/{y}.png）。
立即学习“前端免费学习笔记（深入）”；
- 每个
L.marker([lat, lng])需手动绑定.bindPopup('内容')才能点击显示信息 - 图标尺寸、阴影、锚点需用
L.icon()显式配置，否则默认小蓝点在高分屏上模糊 - 批量添加建议用
L.featureGroup(markers).addTo(map)，比逐个addTo性能更好
真正麻烦的从来不是“加几个点”，而是坐标系对齐、异步加载顺序、移动端缩放适配、以及点击反馈是否及时 —— 这些细节没处理好，用户看到的就是一堆错位的图标或空白地图容器。
