react-amap-v2/docs/components/overlay/geo-json.md

高德地图 v2.0 react 组件

---
order: 8
---

# GeoJSON

## 快速入门

此处给出了最简单示例

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

export default () => (
  <Map zoom={8} center={[121.555041, 31.177674]}>
    <GeoJSON
      geoJSON={{
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            properties: {},
            geometry: {
              type: 'Point',
              coordinates: [121.20941162109374, 31.23159167205059],
            },
          },
          {
            type: 'Feature',
            properties: {},
            geometry: {
              type: 'LineString',
              coordinates: [
                [121.63238525390626, 31.156408414557],
                [121.56921386718751, 30.96583420242113],
                [121.47308349609374, 31.012925049646263],
                [121.42639160156249, 31.036461753598545],
              ],
            },
          },
        ],
      }}
      getPolyline={(geoJson, lnglat) =>
        new AMap.Polyline({
          path: lnglat,
          fillOpacity: 1,
          strokeColor: 'red',
          fillColor: 'red',
        })
      }
    />
  </Map>
);
```