高德地图 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调用示例代码

相关推荐

  • 高频数据交换下Flutter与ReactNative的对比

    (标题图片来自网络,侵删) 后端使用go写的socketio服务模拟期货行情数据,每10ms推送10条行情数据 ReactNative已经尽力优化了。 Flutter由于没fluttersock...

    1 年前
  • 高性能迷你React框架 anu1.3.0 发布

    anujs1.3.0是一款高性能Reactlike框架,是目前世界上对React16兼容最好的迷你库。 自React16起,相继推出createContext,createPortal, creat...

    2 年前
  • 高德地图搜索功能以及清除搜索结果maker

    第一次写文章,写得不好各位看官见谅~ (pσσ)P 首先这是一个vue里面的项目,高德地图api是直接CDN进来的,所以使用了global来调用,默认已经初始化了一个地图,为了实现一个输入框搜索功能和...

    1 年前
  • 高德地图---获取用户地理位置Geolocation

    一、前提 二、js实现逻辑功能创建地图,获取用户地理位置(3种方式)1) 地图初始化加载定位到当前城市。 2) 浏览器定位。 3) IP定位获取当前城市信息ps: 需求需要定位到具体的位置,...

    15 天前
  • 高品质 React UI 组件

    (https://img.javascriptcn.com/cca319311c2ea59a2b5cdaa63b997828)(https://link.funteas.com?target=http...

    2 年前
  • 骚操作!在react中使用vuex

    原文地址(https://github.com/zyl1314/blog/issues/12) 前言 笔者最近在学习使用,提到react就绕不过去。redux是一个状态管理架构,被广泛用于rea...

    2 年前
  • 项目文档说明:react + Ant Design 的 blog-react-admin

    效果图(https://img.javascriptcn.com/734ce56fe3a37ab11e9744473f56bae1 "效果图") 前言 此 blogreactadmin 项目是基...

    1 年前
  • 面试题:Hooks 与 React 生命周期的关系

    React 生命周期很多人都了解,但通常我们所了解的都是 单个组件 的生命周期,但针对 Hooks 组件、多个关联组件(父子组件和兄弟组件) 的生命周期又是怎么样的喃?你有思考和了解过吗,接下来我们将...

    8 个月前
  • 面试官:请你在React中引入Vue3的@vue/reactivity,实现响应式。

    前言 React的状态管理是一个缤纷繁杂的大世界,光我知道的就不下数十种,其中有最出名immutable阵营的redux,有mutable阵营的mobx,reacteasystate,在hooks诞生...

    2 个月前
  • 面试官我想做个Reacter(React路由)

    路由的基础用法回顾,源码study,文章首发于docs,求个star 依赖 路由依赖于 reactrouter ,但是一般 pc 路由使用 reactrouterdom ,它依赖于 reactrout...

    1 个月前

官方社区

扫码加入 JavaScript 社区