首页 / Leaflet / API 文档

CircleMarker

先看结论

半径以像素为单位的圆点矢量，缩放地图时屏幕上大小不变。

最后验证 2026-11-03 · Leaflet 1.9.4 · 更新 2026-10-28 · 引用本文

L.circleMarker(latlng, options) → CircleMarker

参数

参数	类型	说明
`latlng`	LatLng	圆心，`[纬度, 经度]`
`options`	Path options	额外支持 `radius`，见下表

选项

选项	默认值	说明
`radius`	10	半径，单位像素，不随缩放变化
`stroke`	true	是否绘制边线
`color`	'#3388ff'	边线颜色
`weight`	3	边线宽度，像素
`opacity`	1	边线不透明度
`fill`	true	是否填充
`fillColor`	null	填充色，未设置时沿用 `color`
`fillOpacity`	0.2	填充不透明度
`dashArray`	null	虚线样式，如 `'4 3'`
`interactive`	true	是否响应鼠标事件

成员

成员	返回值	说明
`setLatLng(latlng)`	this	移动圆心
`getLatLng()`	LatLng	读取圆心
`setRadius(radius)`	this	改像素半径
`getRadius()`	Number	读取像素半径
`setStyle(style)`	this	更新颜色、边线等样式
`bringToFront()` / `bringToBack()`	this	绘制层级调整
`bindPopup(content)` / `bindTooltip(content)`	this	挂气泡或提示

var dots = [];

function render(list) {
  dots.forEach(function (d) { map.removeLayer(d); });
  dots = list.map(function (item) {
    return L.circleMarker([item.lat, item.lng], {
      radius: 4 + item.value * 0.25,
      color: '#ffffff',
      weight: 1,
      fillColor: item.value > 60 ? '#c2410c' : '#1f5fd0',
      fillOpacity: 0.85
    }).bindTooltip(item.name + '：' + item.value).addTo(map);
  });
}

半径单位是像素，不是米。放大到 16 级时 radius: 10 仍占 10 像素，对应的地面范围会缩小到原来的几十分之一。表示真实覆盖面积用 L.circle，它的 radius 以米为单位。

点位超过两千个时，SVG 渲染器会生成同样多的节点，拖动明显卡顿。给地图加 preferCanvas: true，或者直接使用 L.canvas() 渲染器。纯展示场景还可以考虑把点画进一张 canvas 瓦片，避开矢量渲染。

引用本文

经纬志（2026）。《CircleMarker》。https://www.jingweizhi.com/leaflet/api/circle-marker.html（访问日期 2026-11-03）。