react-amap 是基于 React 的高德地图组件。

1. 获取地图示例

react-amap 作为高德地图在 React 中的实现，实际使用中不可避免的需要通过地图对象调用各种方法，react-amap 中获取地图示例方法如下：

<Map
  events={{
    created: (el) => {
      this.mapEl = el;
    },
  }}
/>

2. 自动聚焦

通过上述方法获取示例之后便可像原生高德地图API一样操作了：

this.mapEl.setFitView();

3. Polyline 拐点样式

由于 react-amap 实现问题，lineJoin 属性无效。react-amap 组件属性是有白名单校验，实属冗余设计。

需要修改 react-amap 源码以下代码才能生效：

<Polyline
  lineJoin="round"
/>

4. 自定义 Marker：位置校准

默认是地点戳样式，并且 Marker 图案校准中心不是图案中心。此处需要设置 anchor 属性为 center，以及配置 offset 进行手动偏移校准。

<Marker
  anchor="center"
  offset={[0.5, 0]}
/>

5. 自定义 Marker：水滴型

结构：

<div>
  <div className={styles.drop} />
  <div className={styles.text}>
    {this.props.text}
  </div>
</div>

样式：

.drop {
  width: 20px;
  height: 20px;
  border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
  transform: rotate(135deg);
  margin-top: -35px;
  margin-left: -2px;
}
.text {
  margin-top: -19px;
  position: absolute;
  width: 16px;
  text-align: center;
  color: white;
  font-size: 12px;
  transform: scale(.8);
}