在react中使用高德地图geojson

1.申请高德key 我的应用 | 高德控制台

2.下载并引入高德

npm install --save react-amap
// 在public/index.html中导入
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的高德key&plugin=AMap.Polygon,AMap.Polyline,AMap.PlaceSearch,AMap.GeoJSON,AMap.PolyEditor,AMap.Map"></script>

import React from "react";
import { Map, Marker } from 'react-amap';

export default class extends React.Component {
  constructor(props) {
    // name: 'AMap',
    super(props);
    this.state = {
      mapZoom: 11,
      mapKey: '你的高德key', 
      mapStyle: ('amap://styles/高德地图样式id'), // 高德地图样式id
      useAMapUI: 'true',
      status: {
        zoomEnable: true,
        dragEnable: true,
      },
      mapCenter: [117.942215, 25.057413],//地图中心点
      mapMake: [117.942215, 25.047413],//marker标记点
    }
    //地图事件
    this.amapEvents = {
      created: (mapInstance) => {
        //eslint-disable-next-line
        let geojson = new AMap.GeoJSON({
          geoJSON: require('../json/XXX.json'), // 本地json文件
          // 还可以自定义getMarker和getPolyline
          getPolygon: function (geojson, lnglats) {
            //eslint-disable-next-line
            return new AMap.Polygon({
              path: lnglats,
              fillOpacity: 0.1, // 透明度
              strokeColor: '#5dbcb9',
              fillColor: '#05c9e6'
            });
          }
        })
        mapInstance.add(geojson);
      }
    }
  }

  render() {
    let { mapCenter, mapMake, mapZoom, mapKey, status, mapStyle } = this.state;
    return <div>
      <div className="echatIndex">
        <Map amapkey={mapKey} center={mapCenter} zoom={mapZoom} status={status} mapStyle={mapStyle} events={this.amapEvents} >
      
          <Marker position={mapMake} />  // 中心点
          <div className="mapDiv"></div> //  高德地图透明度

        </Map>
      </div>
      <div>
      </div>
    </div>
  }
}

 // 透明度
.mapDiv{
  width: 100%;
  height: 100%;
  pointer-events:none; //  一定要有这个
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0);
  z-index:  99;
}