在React中使用高德地图的api

1.初始化高德地图 initMap 有两种如下

1.1 通过html引入高德地图

<script type="text/javascript">
        window._AMapSecurityConfig = {
                securityJsCode:'**********',
        }
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=**************&plugin=AMap.Geocoder,AMap.DistrictSearch,AMap.DistrictLayer"></script>
<script src="https://webapi.amap.com/loader.js"></script>

1.2 通过生命周期引入高德地图

const initAMap = (plugins = []) => {
    // 获取全局对象
    const getWindow = () => {
        if (typeof global !== 'undefined') {
                return global;
        }
        return window;
    };

    getWindow()._AMapSecurityConfig = {
        securityJsCode: '*******'
    };

    return new Promise((resolve, reject) => {
        if (getWindow().AMap) {
            resolve();
        } else {
            const script = document.createElement('script');
            const plugin = plugins?.length ? `&plugin=${plugins.join(',')}` : '';
            script.type = 'text/javascript';
            script.src = `//webapi.amap.com/maps?v=2.0&key=************${plugin}`;
            script.onload = resolve;
            script.onerror = reject;
            document.body.append(script);
       }
    });
};

componentWillMount() {
     initAMap();
}

or

useEffect(() => {
        initAMap(['AMap.DistrictSearch']);
}, [])

2. 实例化高德地图

const aMap = new AMap.Map('mapContainer', {
    resizeEnable: false,
    dragEnable: previewFlag,
    doubleClickZoom: false,
    scrollWheel: false,
    showLabel: false,
    features: ['bg'],
    jogEnable: false,
    animateEnable: false,
    isHotspot: false,
    mapStyle: getMapStyle()
});