高德地图

　　　　 var plugin = ['AMap.OverView','AMap.Scale','AMap.ToolBar'];//后面用到的插件要在这里添加才能用
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.sync = true;
        script.src = 'http://webapi.amap.com/maps?v=1.4.15&callback=initAMap&key=ad21a606b14d1c3788cd4444250de166&&plugin=' + plugin.join(',');
        script.onerror = function(){
            console.log('创建失败')
        };
        document.head.appendChild(script);
　　　　 var map;
        //initMap为script.src 中的callback名称
        window.initAMap = function(){
            //container为盒子id 盒子需要定义宽高
            map = new AMap.Map('container', {
                center: [106.524497,29.618969],
                zoom: 16,
            });
            var toolbar = new AMap.ToolBar();
            // 实例鹰眼
            const overView = new AMap.OverView({
                visible: true,
            });
            overView.open();
            // 实例比例尺
            const scale = new AMap.Scale({
                visible: true,
            });
            // 设置中心点
            const circle = new AMap.Circle(
                {
                    center: new AMap.LngLat(106.524497,29.618969), // 圆心位置
                    radius: 200,  //半径
                    strokeColor: 'red',  //线颜色
                    strokeOpacity: 1,  //线透明度
                    strokeWeight: 3,  //线粗细度
                    fillColor: 'red',  //填充颜色
                    fillOpacity: 0.35, //填充透明度
                }
            );
            // 标记点
            var marker = new AMap.Marker({
                position: new AMap.LngLat(106.524497,29.618969),   // 经纬度对象，也可以是经纬度构成的一维数组[106.524497,29.618969]
                title: '人和'
            });

            // 将创建的点标记添加到已有的地图实例：
            map.add(marker);
            // 添加填充区域
            map.add(circle);

            //添加工具
            map.addControl(overView);
            map.addControl(toolbar);
            map.addControl(scale);
            map.on('complete',finish(AMap));//地图加载完毕
        }
        function finish(){
            console.log('地图加载完成')
        }
        //地图销毁
        function destroyMap () {
            map && map.destroy();
        }
        document.getElementById('destoryMap').onclick = function(){
            destroyMap()
        }