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

相关推荐

  • 🆘 一次理解清楚,为什么使用 React useEffect 中使用 setInterval 获取的值不是最新的

    Intro 这篇文章将通过一个使用 React Hook 常遇到的问题(stale state)入手,尝试理解 Hook 的内部运行逻辑。 废话不多说,直接看示例Sandbox。

    1 个月前
  • 高频数据交换下Flutter与ReactNative的对比

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

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

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

    2 年前
  • 高德地图的使用 vue-amap+vue

    基本配置 1:在vue项目中下载vueamap npm install vueamap save 2: 在main.js引入高德地图 创建多边形的电子围栏 效果图 (/public/upl...

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

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

    2 年前
  • 高德地图实现(附案例)

    需求:基于高德地图实现地图展示实现步骤:1.首先注册登录并创建一个应用 image.png(/public/upload/db7478b92a72da60c0e15d99f5cd83d7) 2....

    2 个月前
  • 高德地图实现(附案例)

    需求:基于高德地图实现地图展示实现步骤:1.首先注册登录并创建一个应用 image.png(/public/upload/d8060ff8271b63096cb542d0c310299b) 2....

    2 个月前
  • 高德地图初使用手记

    前言 本文作为笔者初上手地图类需求开发的小记,没有深入的探讨,仅包含了一些初级API使用的记录与一些萌新踩坑的总结。 需求简述 产品给提了一个需求,需要用到高德地图组件将一组或多组经纬度坐标在地图中描...

    22 天前
  • 高德地图---获取用户地理位置Geolocation

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

    5 个月前
  • 高德地图+vue实现页面点击绘制多边形及多边形切割拆分

    最终效果 (/public/upload/7732e1e729bfcd99f99f56cd04ac17b1) 技术栈 项目中使用到的技术 高德基于vue的vueamap,组件使用的elemen...

    2 个月前

官方社区

扫码加入 JavaScript 社区