Leaflet 是最轻量且可控的地图方案，仅需一个 CSS 和一个 JS 文件，CDN 引入即可快速显示带标记的地图；关键点包括：必须设置 tileLayer、setView 坐标顺序为 [lat, lng]、HTML 容器需固定宽高、自定义图标需用 L.icon 并设 iconSize、地理编码需后端代理或 Nominatim、移动端需加 viewport meta 且避免干扰 CSS。
用 Leaflet 加载地图并显示单个标记最简路径
不用框架、不接高德百度，Leaflet 是最轻量且可控的方案。它只依赖一个 CSS + 一个 JS，CDN 直引就能跑，适合快速验证定位逻辑。
关键点：必须设置 tileLayer 提供底图瓦片，否则地图空白；setView 的经纬度顺序是 [lat, lng]（不是 [lng, lat]），反了会定位到南大西洋。
- 引入 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>
- HTML 容器需设固定宽高：
<div id="map" style="height: 500px;"></div> - JS 初始化示例：
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);
L.marker() 自定义图标和弹窗的实际写法
默认蓝水滴太普通，且点击无反馈。加弹窗和换图标是高频需求，但容易漏掉两件事：图标尺寸需手动设 iconSize，弹窗内容得用 bindPopup() 而非直接写 HTML 字符串。
- 自定义图标必须 new
L.Icon，不能只传 URL：const customIcon = L.icon({ iconUrl: 'pin-red.png', iconSize: [32, 32], iconAnchor: [16, 32] }); - 弹窗支持 HTML，但要用
bindPopup('<strong>?国贸大厦</strong>')，不是popup('<...>')（后者不存在） - 若图标不显示，检查路径是否 404、
iconSize是否与图片实际像素一致、CSS 是否有img { max-width: none; }干扰
从地址转坐标（地理编码）必须走后端或合规 API
浏览器里直接用 fetch 调高德/百度/腾讯的地理编码接口会跨域失败，因为它们要求 referer 白名单或 key 签名。前端硬上只会收到 CORS error 或 400 Bad Request。
立即学习“前端免费学习笔记（深入）”；
- 可行方案只有两个：
– 后端写个代理接口（如 Express 接收地址，转发请求，再返回坐标）
– 用Nominatim（OpenStreetMap 免费服务），但要加user-agent头且限频，仅适合调试：fetch('https://nominatim.openstreetmap.org/search?q=北京朝阳区&format=json&limit=1') .then(r => r.json()) .then(d => d[0] && L.marker([d[0].lat, d[0].lon]).addTo(map)); - 千万别在前端拼接高德 URL 并 fetch，
https://restapi.amap.com/v3/geocode/geo?address=xxx&key=xxx会被浏览器拦截
移动端缩放错位和 marker 点击失效的修复点
在 iOS Safari 或安卓 Chrome 上，地图拖动后 marker 偏移、点击区域变小，大概率是 viewport 设置或 CSS 干扰导致的渲染比例异常。
- 必须加 viewport meta：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 避免给
#map父容器设transform、scale或overflow: hidden，Leaflet 的定位计算会失准 - marker 点击无反应？确认没被其他元素（如空
div或 loading 遮罩）盖住，用浏览器开发者工具检查事件监听器是否绑定成功（marker.on('click', ...)）
