对于百度地图的基本使用的话，可以看一下其官方文档， 本文着重讲解关于 Marker 标注的使用以及点聚合并结合到地图各省的聚合实现 。

地图 JS API | 百度地图API SDK

这里会使用到 react-bmapgl 这个库，其是百度地图的 React 封装库，详细使用可以参考其官方文档 。

React-BMapGL文档

使用方式和 API 基本和原生一致，只是将控件转换成了组件以及 API 转换成了属性，内部最终还是调用原生的 API 实现。

最终实现效果展示：

20241011173317_rec_-convert.gif

前置

先从简单的开始，先看看最简单的 Marker 使用。

数据如下，包括一些基本信息：经纬度、省份代码、名称；后续都会使用该数据进行 Marker 操作。

const markerList = [
  {
    lng: 121.555858,
    lat: 38.976823,
    name: '标注1',
    provinceCode: '21',
  },
  {
    lng: 121.523497,
    lat: 24.945629,
    name: '标注2',
    provinceCode: '71',
  },
  {
    lng: 121.397243,
    lat: 31.174497,
    name: '标注3',
    provinceCode: '31',
  },
  {
    lng: 121.397243,
    lat: 31.174497,
    name: '标注4',
    provinceCode: '31',
  },
  {
    lng: 116.801042,
    lat: 38.94907,
    name: '标注5',
    provinceCode: '12',
  },
  {
    lng: 104.256265,
    lat: 39.99193,
    name: '标注6',
    provinceCode: '15',
  },
  {
    lng: 122.978436,
    lat: 41.130165,
    name: '标注7',
    provinceCode: '21',
  },
  {
    lng: 108.834663,
    lat: 34.398372,
    name: '标注8',
    provinceCode: '61',
  },
  {
    lng: 121.327012,
    lat: 31.200458,
    name: '标注9',
    provinceCode: '31',
  },
  {
    lng: 117.375726,
    lat: 39.133141,
    name: '标注10',
    provinceCode: '12',
  },
]

再来看看地图组件的实现

const Container = () => {
  return (
    <Map
      zoom={6}
      center={{ lat: 37.41918484360441, lng: 104.12234245932834 }}
      style={{ height: '100%' }}
      enableDragging
      mapType='normal'
      enableScrollWheelZoom
    >
      {markerList.map(item => (
        <Marker key={item.name} position={{ lng: item.lng, lat: item.lat }} />
      ))}
    </Map>
  )
}

效果如下：

image.png