import React, { useEffect, useState } from 'react';

let map = '';
const Amap = (props) => {
    const [mapComplete, setMapComplete] = useState(false);

    useEffect(() => {
        drawMap();
    }, []);
    const drawMap = () => {
        try {
            if (AMap) loadMap();
        } catch (e) {
            var script = document.createElement("script");
            script.src = "https://webapi.amap.com/maps?v=2.0&key=00f9a29dedcdbd8befec3dfe0cef5003&plugin=AMap.AutoComplete,AMap.PlaceSearch";
            document.body.appendChild(script);
            loadMap();
        }
    }

    const loadMap = () => {
        map = new AMap.Map("amapId", {
            resizeEnable: true,
            center: [115.934544, 28.664365], // 地图中心点，初始定位加载显示楼块
            // center: [115.857952, 28.683003],// 地图中心点
            zoom: 14, // 地图显示的缩放级别
            zooms: [3, 20],
            pitch: 0, // 地图俯仰角度，有效范围 0 度- 83 度
            viewMode: '3D', // 地图模式
            // rotation: 60
            // showLabel: false
        });
        // 主题样式
        map.setMapStyle("amap://styles/fb26776387242721c2fc32e2cb1daccc");

        map.on('complete', function () {
            console.log("map-complete")
            setMapComplete(true);
        });
        window.onload = function () {
            console.log("window.onload")
        }
    };

    return <div style={{ width: '100%', height: '100%', }}>
        <div id='amapId' style={{ width: '100%', height: '100%', background: "#101824" }} />
    </div>
}

export default Amap;