使用react-amap高德提供的接口简单化实现地图

本篇文章主要介绍的是 在React工程中 使用react-amap组件来写一个地图，地图上加一个点标记；

注意 ：目前的本人发现在使用react-amap会对 umi 搭建的工程有所影响，建议使用原生高德api（document.ejs【可以看我的上一篇博客，我有详细的写过怎么使用】）来自己手动做个地图可控组件，虽然稍微有点麻烦，但是毕竟项目上线这个方法比较安全。

下面看一下我的组件是怎么写的吧：
npm install react-amap 先进行安装

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


/*
 ps:{
    react-amap (api地址) : https://elemefe.github.io/react-amap/
 }
*/

export default class extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            mapZoom: 13, //地图缩放等级 （zoom）
            //https://lbs.amap.com/api/javascript-api/guide/abc/prepare这里有介绍key怎么申请
            mapKey: '。。。。。。。。',//Key就不贴出来了奥
            status: {
                zoomEnable: false,
                dragEnable: false,
            },
            mapCenter:[116.292329, 39.946996],//地图中心点
            mapMake :[116.273961, 39.946338],//marker标记点
        };
    }

    componentDidMount() {

    }

    render() {
        let {mapCenter, mapMake, mapZoom, mapKey, status} = this.state;
        return <div style={{width:'100%',height:'800px'}}>
            {/*地图创建必有参数 （key，中心点，zoom等级）*/}
            <Map amapkey={mapKey} center={mapCenter} zoom={mapZoom} status={status}>
                {/*marker标记点创建必有参数 （position中心点）*/}
                <Marker position={mapMake}/>
            </Map>
        </div>
    }
}

本人在项目中发现问题后，很果断弃用组件的方式 使用原生来自己编写可控组件。各位同仁可根据自行需求来选取。