原生HTML无法实现地图聚合标记，必须依赖地图SDK；Leaflet需引入leaflet.markercluster插件并按序加载资源，百度地图需匹配API版本且监听clusterclick事件，高德/腾讯地图性能优化需结合Canvas或预处理，Azure Maps的HtmlMarker不支持聚合。
原生 HTML 无法实现地图聚合标记，必须依赖地图 SDK 提供的聚类能力。Leaflet、百度地图、高德地图、腾讯地图都支持，但实现方式和插件机制差异很大，选错方案会导致加载失败、点击无响应或性能崩溃。
Leaflet 怎么用 MarkerClusterer 实现聚合
Leaflet 自身不带聚合功能，需额外引入 leaflet.markercluster 插件（注意不是同名但不兼容的旧版）。
- 必须按顺序加载：先
leaflet.css+leaflet.js，再MarkerCluster.Default.css+MarkerCluster.js - 聚合容器不能是空
<div id="map"></div>—— 必须设明确height（如400px或100vh），否则地图初始化失败 - 聚合点默认样式由 CSS 控制，修改
.marker-cluster-small等类可定制大小/颜色；若想用自定义图标，得重写iconCreateFunction选项 - 常见错误：
L.marker([lat, lng]).addTo(clusterGroup)写成.addTo(map)—— 聚合组必须独立创建，再用clusterGroup.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 markers = L.markerClusterGroup();
markers.addLayer(L.marker([39.9042, 116.4074]).bindPopup('北京'));
markers.addLayer(L.marker([39.9052, 116.4084]).bindPopup('西直门'));
map.addLayer(markers);
百度地图怎么加 MarkerClusterer 插件
百度地图官方提供 MarkerClusterer 扩展库，但必须与主 API 版本严格匹配（v2.0 对应 v1.2），且不支持 HTTPS 页面加载 HTTP 资源。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- 引入顺序不能错：
<script src="http://api.map.baidu.com/api?v=2.0&ak=YOUR_KEY"></script>必须在MarkerClusterer_min.js之前 - 聚合点数量显示位置固定在图标中心，无法用
offset微调 —— 如需偏移，得自己重写createClusterIcon方法 - 若页面用
file://协议打开，百度 API 会直接报INVALID_USER_KEY或静默白屏，必须走localhost或真实域名 - 聚合后点击弹窗失效？检查是否对单个
BMap.Marker调用了addEventListener('click', ...)—— 聚合状态下，原始 marker 的事件监听器会被剥离，应监听MarkerClusterer的clusterclick事件
高德/腾讯地图聚合性能怎么控制
高德和腾讯地图的聚合插件默认开启“视口内聚合”，即只聚合当前屏幕可见区域的点，但它们对 DOM 渲染策略完全不同。
- 高德
AMap.MarkerClusterer使用 Canvas 渲染聚合点，DOM 节点数恒定，适合 5000+ 点；但自定义图标需用render函数返回 canvas，不能直接传 img URL - 腾讯
qq.maps.MarkerClusterer依赖 jQuery，若项目已弃用 jQuery，需手动 patch 或改用qq.maps.Marker+ 自研距离计算逻辑 - 两者都不支持「点击聚合点展开子点」的交互 —— 展开动作需自己监听
click事件，再调用map.setZoom(zoom+1)并重新计算可视范围内的点 - 超过 2000 个点时，建议预处理：用 Web Worker 做空间网格聚类（如 GeoHash），再把结果传给地图 SDK，避免主线程卡死
Azure Maps 的 HtmlMarker 能不能聚合
不能。Azure Maps 的 HtmlMarker 是纯 DOM 渲染，没有内置聚合能力，官方明确建议：超过几百个就用 SymbolLayer 或 BubbleLayer 替代。
-
HtmlMarker每个实例生成一个独立<div>，浏览器重排压力随数量线性上升；实测 800+ 个时滚动延迟明显 <li>强行用 JS 做前端聚类（比如按 zoom level 分组 + 手动创建/销毁 <code>HtmlMarker）可行，但失去Popup的自动定位能力，pixelOffset需反复校准 - 若必须用 HTML 标记（比如要嵌入按钮或表单），唯一稳妥做法是：只对当前视口内点做
HtmlMarker，其余用SymbolLayer显示聚合数字，缩放时动态切换
真正容易被忽略的是：所有聚合方案都依赖地图的 zoom 和 bounds 变化事件做重计算，但这些事件在快速拖拽时高频触发，没加节流（throttle）会导致 CPU 暴涨 —— 不是插件问题，是你没包一层 setTimeout 或用 requestAnimationFrame 控制更新节奏。
