API 参考

所有地图组件及其属性的完整参考。

组件结构

所有你可以使用和组合来构建地图的组件部分：

<Map>
  <MapMarker longitude={...} latitude={...}>
    <MarkerContent>
      <MarkerLabel />
    </MarkerContent>
    <MarkerPopup />
    <MarkerTooltip />
  </MapMarker>

  <MapPopup longitude={...} latitude={...} />
  <MapControls />
  <MapRoute coordinates={...} />
  <MapArc data={...} />
  <MapGeoJSON data={...} />
  <MapClusterLayer data={...} />
</Map>

Map

根容器组件，初始化 MapLibre GL 并为子组件提供上下文。自动处理浅色和深色模式之间的主题切换。

继承 MapOptions（排除 container 和 style）。

useMap

提供访问 MapLibre 地图实例和加载状态的 hook。必须在 Map 组件内使用。

const { map, isLoaded } = useMap();

• map — MapLibre.Map 实例
• isLoaded — 布尔值，表示地图是否已加载就绪

MapControls

渲染地图控制按钮（缩放、指北针、定位、全屏）。必须在 Map 内部使用。

MapMarker

标记相关组件的容器。为子组件提供上下文并处理标记定位。

继承 MarkerOptions（排除 element）。

MarkerContent

渲染标记的视觉内容。必须在 MapMarker 内使用。无 children 时渲染默认蓝色圆点。

MarkerPopup

渲染附加到标记的弹窗，点击时打开。必须在 MapMarker 内使用。

继承 PopupOptions（排除 className 和 closeButton）。

MarkerTooltip

渲染悬停时显示的提示。必须在 MapMarker 内使用。

MarkerLabel

渲染标记上方或下方的文字标签。必须在 MarkerContent 内使用。

MapPopup

独立弹窗组件，可放在地图任意位置，无需标记。必须在 Map 内使用。

继承 PopupOptions（排除 className 和 closeButton）。

MapRoute

渲染连接坐标点的线/路线。必须在 Map 内使用。支持点击和悬停交互。

MapArc

使用二次贝塞尔曲线渲染坐标对之间的弯曲弧线。必须在 Map 内使用。

基于 MapLibre 线图层。支持 MapLibre 表达式实现逐要素样式。

MapGeoJSON

将任意 GeoJSON 渲染为填充 + 轮廓图层。必须在 Map 内使用——通常配合 blank 属性。

MapClusterLayer

使用 MapLibre GL 原生聚类渲染聚类点数据。自动将附近点分组为聚类，点击展开。必须在 Map 内使用。