---
name: Polyline
route: /polyline
order: 5
sidebar: true
---

import { Playground } from 'docz';
import { Button } from 'antd';
import {Map,Marker,Polyline} from '../../index';

# Polyline Component

## 用法
#### 基本设置
<Playground>
    {()=>{
        const pointList = [{lng:121.357841,lat:31.229182},{lng:121.360177,lat:31.230664},{lng:121.360518,lat:31.226696}];
        const [points,setPoints] = React.useState(pointList);
       return  <Map mapKey="SbtCslmFwveeKa1mM1dHoNL2uyambFMN"  enableScrollWheelZoom center={[121.359593,31.228016]} zoom={16} mapContainerStyle={{height:'400px'}}>
                 <Polyline points={points}  strokeColor="blue" strokeWeight={2} />
                  {/* <Button onClick={()=>setRadius(radius+5)}>update radius</Button> */}
               </Map>
    }}
</Playground>


#### 可编辑
<Playground>
    {()=>{
        const pointList = [{lng:121.357841,lat:31.229182},{lng:121.360177,lat:31.230664},{lng:121.360518,lat:31.226696}];
        const [points,setPoints] = React.useState(pointList);
        const [enableEditing,setEnableEditing] = React.useState(true);
       return  <Map mapKey="SbtCslmFwveeKa1mM1dHoNL2uyambFMN"  enableScrollWheelZoom center={[121.359593,31.228016]} zoom={16} mapContainerStyle={{height:'400px'}}>
                 <Polyline points={points} enableEditing={enableEditing}  strokeColor="blue" strokeWeight={2} />
                 <Button onClick={()=>setEnableEditing(!enableEditing)}>update enableEditing</Button>
               </Map>
    }}
</Playground>

## API

#### 属性
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| points | 设置多边型的点数组 | array\{lng,lat} | - |
| strokeColor | 设置圆形的边线颜色，参数为合法的CSS颜色值 | string | - |
| fillColor | 设置圆形的填充颜色，参数为合法的CSS颜色值。当参数为空字符串时，圆形覆盖物将没有填充效果 | string | - |
| strokeOpacity | 设置圆形的边线透明度，取值范围0 - 1 | number | - |
| fillOpacity | 设置圆形的填充透明度，取值范围0 - 1 | number | - |
| strokeWeight | 设置圆形边线的宽度，取值为大于等于1的整数 | number | - |
| strokeStyle | 设置圆形边线样式为实线或虚线，取值`solid` `dashed` | string | - |
| enableEditing | 开启编辑功能 | boolean | - |
| enableMassClear | 允许覆盖物在map.clearOverlays方法中被清除 | boolean | - |

#### 事件 [参考](http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference_3_0.html#a3b14)
| 参数 | 说明 | 参数 | 
| --- | --- | --- | 
| onClick | 点击折线后会触发此事件| {type, target, point, pixel} |
| onDblClick | 双击折线后会触发此事件 | {type, target, pixel, point} |
| onMouseDown | 鼠标在折线上按下触发此事件 | {type, target, pixel, point} |
| onMouseUp | 鼠标在折线释放触发此事件 | {type, target, pixel, point} |
| onMouseOut | 鼠标离开折线时触发此事件 | {type, target, pixel, point} |
| onMouseOver | 当鼠标进入折线区域时会触发此事件 | {type, target, pixel, point} |
| onRemove | 移除折线时触发 | {type, target} |
| onLineUpdate | 覆盖物的属性发生变化时触发 | {type, target} |