react-amap-v2/docs/components/overlay/polyline.md

高德地图 v2.0 react 组件

---
order: 4
---

# Polyline

## 快速入门

此处给出了最简单示例

```tsx
import React from 'react';
import { Map, Polyline } from 'react-amap-v2';

export default () => (
  <Map center={[121.468524, 31.22466]}>
    <Polyline
      fillColor="#52c41a"
      strokeWeight={6}
      showDir
      path={[
        [121.247424, 31.257536],
        [121.523456, 31.259884],
        [121.454791, 31.162399],
      ]}
    />
  </Map>
);
```

## 可编辑

此处给出了最简单示例

```tsx
import React, { useState } from 'react';
import { Map, Polyline } from 'react-amap-v2';

import Paper from '@material-ui/core/Paper';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Switch from '@material-ui/core/Switch';

export default () => {
  const [editable, setEditable] = useState(true);

  return (
    <Map center={[121.468524, 31.22466]}>
      <Paper
        color="text.primary"
        style={{
          zIndex: 10,
          position: 'absolute',
          top: 20,
          right: 20,
          padding: '0 10px',
        }}
      >
        <FormControlLabel
          control={
            <Switch
              checked={editable}
              onChange={e => setEditable(e.target.checked)}
            />
          }
          label="可编辑"
        />
      </Paper>
      <Polyline
        editable={editable}
        fillColor="#52c41a"
        strokeWeight={6}
        editorEvents={{
          end: data => {
            console.log('结束编辑', data);
          },
        }}
        path={[
          [121.247424, 31.257536],
          [121.523456, 31.259884],
          [121.454791, 31.162399],
        ]}
      />
      <Polyline
        editable={editable}
        fillColor="#52c41a"
        strokeWeight={6}
        editorEvents={{
          end: data => {
            console.log('结束编辑', data);
          },
        }}
        path={[
          [121.60654, 31.147121],
          [121.842746, 31.016571],
          [121.786441, 31.181199],
        ]}
      />
    </Map>
  );
};
```