高德地图 react-amap 实战

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);
}
原文链接:segmentfault.com

上一篇:浅谈react context
下一篇:篮球数据API接口 - 【篮球队员】API调用示例代码

相关推荐

官方社区

扫码加入 JavaScript 社区