@uiw/react-amap-circle
TypeScript icon, indicating that this package has built-in type declarations

7.1.3 • Public • Published

Circle 圆形组件

Buy me a coffee npm version Downloads

构造圆形对象,通过 CircleOptions 指定多边形样式

import { Circle } from '@uiw/react-amap';
// 或者单独安装使用
import { Circle } from '@uiw/react-amap-circle';

基本用法

import ReactDOM from 'react-dom';
import React, { useState } from 'react';
import { Map, APILoader, Circle } from '@uiw/react-amap';

const Example = () => {
  const [show, setShow] = useState(true);
  return (
    <>
      <button onClick={() => setShow(!show)}>
        {show ? '隐藏' : '显示'}
      </button>
      <div style={{ width: '100%', height: '300px' }}>
        <Map zoom={14} center={[116.400274, 39.905812]}>
          <Circle
            visible={show}
            radius={1000}
            strokeColor="#fff"
            strokeWeight={2}
            center={new AMap.LngLat(116.39,39.9)}
          />
        </Map>
      </div>
    </>
  );
}

const Mount = () => (
  <APILoader akey="a7a90e05a37d3f6bf76d4a9032fc9129">
    <Example />
  </APILoader>
);

export default Mount;

Props

更多参数设置

参数 说明 类型 默认值
visible 覆盖物是否可见。 boolean -
radius 圆半径,单位:米 number -

事件

事件类型文档

参数 说明 类型
onHide 隐藏 (): void;
onShow 显示 (): void;
onRightClick 鼠标右键单击事件 (event: MapsEvent): void;
onClick 鼠标左键单击事件 (event: MapsEvent): void;
onTouchEnd 鼠标左键单击事件 (event: MapsEvent): void;
onDblClick 鼠标左键双击事件 (event: MapsEvent): void;
onTouchMove 触摸移动进行中时触发事件,仅适用移动设备 (event: MapsEvent): void;
onTouchStart 触摸开始时触发事件,仅适用移动设备 (event: MapsEvent): void;
onMouseOut 鼠标移出 (event: MapsEvent): void;
onMouseOver 鼠标经过 (event: MapsEvent): void;
onMouseUp 鼠标抬起 (event: MapsEvent): void;
onMouseDown 鼠标按下 (event: MapsEvent): void;

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
7.1.3
76latest

Version History

VersionDownloads (Last 7 Days)Published
7.1.3
76
7.1.2
0
7.1.1
0
7.1.0
52
7.0.2
0
7.0.1
0
7.0.0
0
6.0.5
24
6.0.4
1
6.0.3
9
6.0.2
6
6.0.1
0
6.0.0
0
5.0.21
1
5.0.20
0
5.0.19
1
5.0.18
0
5.0.17
0
5.0.16
0
5.0.15
0
5.0.140
5.0.130
5.0.120
5.0.111
5.0.100
5.0.90
5.0.80
5.0.70
5.0.60
5.0.50
5.0.40
5.0.30
5.0.21
5.0.10
5.0.01
4.6.013
4.5.30
4.5.20
4.5.16
4.5.01
4.4.20
4.4.10
4.4.00
4.3.10
4.3.01
4.2.20
4.2.10
4.2.00
4.1.10
4.1.00
4.0.70
4.0.60
4.0.50
4.0.40
4.0.30
4.0.20
4.0.10
4.0.00
3.0.40
3.0.30
3.0.20
3.0.10
3.0.00
2.7.22109
2.7.210
2.7.201
2.7.190
2.7.180
2.7.170
2.7.160
2.7.150
2.7.140
2.7.130
2.7.121
2.7.110
2.7.100
2.7.91
2.7.70
2.7.60
2.7.50
2.7.40
2.7.30
2.7.20
2.7.10
2.7.00
2.6.20
2.6.10
2.6.01
2.5.10
2.5.00
2.4.10
2.4.00
2.3.00
2.2.60
2.2.50
2.2.40
2.2.30
2.2.20
2.2.10
2.2.00
2.0.21
2.0.10
2.0.00

Package Sidebar

Install

npm i @uiw/react-amap-circle

Weekly Downloads

308

Version

7.1.3

License

MIT

Unpacked Size

12.2 kB

Total Files

12

Last publish

Collaborators

  • uiwjs
  • wcjiang