【高德地图在React项目中的使用——（一）入门】

所有来源于官方文档，只是自己记录一下自己的使用过程以及遇到的问题，只记录web端的开发使用

//mapstudy.jsx
<div id="mapContainer"></div> 

2. 在初始化方法中创建一个地图
   
   因为AMap是挂在window上的，所以需要const { AMap } = window，否则会报错AMap’ is not defined’

//mapstudy.js
import React from 'react'
import './index.scss'

const { AMap } = window
class MapStudy extends React.Component {

    componentDidMount(){
        this.initMap()
    }

    initMap = () => {
        const map = new AMap.Map('mapContainer', {
            zoom:11,//级别
            center: [116.397428, 39.90923],//中心点坐标
        });
    }

    render(){
        return(
            <div className='screen'>
                <div id="mapContainer" className='gdMap' />
            </div>
        )
    }
}

export default MapStudy

//index.scss
.screen {
    position: relative;
    width: 100vw;
    height: 100vh;
}

.gdMap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

至此，一个地图就显示出来了，后续可以在地图上进行其他操作，例如打标记，画图形、画弹窗、画路线等等，很多都可以直接调用高德的API，所以需要对它进行多多熟悉。