原生html无法渲染交互式地图，必须引入第三方地图sdk；因和无法响应缩放拖拽、绑定经纬度、支持弹窗图层等，需依赖地图引擎的投影与渲染能力。
直接用原生 HTML 无法渲染交互式地图或显示标注点——必须引入第三方地图 SDK（如 Leaflet、Mapbox 或高德/百度地图 JS API），HTML 只负责提供容器和结构。
为什么不能只靠 <img> 或 <svg></svg> 做动态地图标注
静态图片或 SVG 虽能画点，但无法响应缩放、拖拽、点击事件，也不能自动适配不同分辨率和地理坐标系。真实场景中，标注需绑定经纬度、支持弹窗、图层控制、聚类等，这些都依赖地图引擎的坐标投影与渲染能力。
- 用
<img src="map.png">加绝对定位模拟标注：坐标不随缩放变化，移动端错位严重 - 手写
<svg></svg>+transform：需自行实现墨卡托投影，维护成本高且无底图瓦片支持 - 真正可用的起点是加载一个轻量地图库，比如 Leaflet（约 40KB gzip）
Leaflet 最小可行标注页面怎么写
Leaflet 是最轻便、文档最清晰的选择，兼容所有现代浏览器，不需要注册密钥。核心三步：引入 CDN、准备容器、初始化地图并添加标记。
关键注意点：id="map" 容器必须设明确宽高（百分比也行，但父元素不能是 height: auto）；L.tileLayer 的底图 URL 需可访问（国内推荐用高德或天地图，避免 OpenStreetMap 被墙）。
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"><div id="map" style="width: 100vw; height: 100vh;"></div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script><script>
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);
L.marker([39.9042, 116.4074]).addTo(map)
.bindPopup('这是天安门');
</script>
国内项目用百度/高德地图要注意什么
百度地图 JS API 和高德地图 JS API 都要求申请密钥（ak 或 key），且对域名白名单校验严格。若本地开发（file:// 或 localhost）未配置调试域名，会直接报 Illegal Request 或 INVALID_USER_KEY 错误。
- 高德示例加载方式：
https://webapi.amap.com/maps?v=2.0&key=<your-key></your-key>，之后用new AMap.Map(...) - 百度示例：
https://api.map.baidu.com/api?v=3.0&ak=<your-ak></your-ak>，之后用new BMap.Map(...) - 高德默认不开启鼠标滚轮缩放，需显式调用
map.setZoomEnable(true) - 百度地图的
BMap.Point构造参数顺序是(lng, lat)，和 Leaflet 相反（Leaflet 是[lat, lng]）
标注点太多时性能卡顿怎么办
超过 200 个 L.marker 会明显拖慢渲染。不要硬加，优先用 L.MarkerClusterGroup（Leaflet 插件）做聚类，或改用 L.circleMarker + pointToLayer 简化图形。
- 引入聚类插件：
https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css+.js - 避免在循环里反复调用
addTo(map)，先创建markerClusterGroup，再批量addLayer - 如果只是展示位置热力，考虑用
L.heatLayer替代逐个 marker
坐标数据格式错误是最常被忽略的问题：后端返回的 lng/lat 字段名不统一、顺序颠倒、值为空或为字符串，都会导致 marker 消失——建议在 L.marker 前加一层 parseFloat 校验和 console.warn 提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
