react引入高德地图

第一步：高德地图官网新建项目获取key

注册高德地图–> 控制台—>应用管理—>创建新应用

新建完成后就可以得到一个key，下面会用到

第二步： 在index.html 引入key

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=【你的key】&plugin=AMap.MouseTool,AMap.PolyEditor,AMap.LabelMarker,AMap.Autocomplete,AMap.ToolBar,AMap.PlaceSearch,AMap.Heatmap,AMap.Geocoder"></script>

第三步： 页面中使用

 

定义const AMap = window.AMap;//必须先这样定义，否则无法直接使用new AMap

const AMap = window.AMap;

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      rmap: null,
    }
  }
  // 组建挂载之后执行
  componentDidMount() {
    // 初始化地图
    this.rmap = new AMap.Map('container', {
      zoom: 1
    });

  }
  // 组建将要卸载的时候执行
  componentWillUnmount(){
    // 释放地图
    this.rmap && this.rmap.destory();
  }

页面容器展示，大小自己设置

<div className="mapCmp">
    <div id="container" style={{ width:"300px", height:"200px" }}></div>
</div>

操作到这里就可以看到一个初始化好的地图了。