import './index.scss';
class Location extends Component {
    state = {
        dom: React.createRef()
    }
    componentDidMount(){
        let layer = new AMap.TileLayer({
                zooms:[3,20],    //可见级别
                visible:true,    //是否可见
                opacity:1,       //透明度
                zIndex:0         //叠加层级
        });
        let map = new AMap.Map('map',{
            layers:[layer] //当只想显示标准图层时layers属性可缺省
        })
    }
    render(){
        return (
            <div ref={this.state.dom} id="map" style={{width: '800px',height: '600px'}}>
            </div>
        );
    }
}

class Driving extends Component {
    componentDidMount(){
        let map = new AMap.Map("map-driving", {
            resizeEnable: true,
            center: [116.397428, 39.90923],//地图中心点
            zoom: 13 //地图显示的缩放级别
        });
        //构造路线导航类
        AMap.plugin('AMap.Driving', function() {
            let driving = new AMap.Driving({
                map,
                // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
                policy: AMap.DrivingPolicy.LEAST_TIME,
                panel: "map-panel"
            })
            
            let points = [
              { keyword: '北京市地震局（公交站）',city:'北京' },
              { keyword: '亦庄文化园（地铁站）',city:'北京' }
            ]
            
            driving.search(points, function (status, result) {
              // 未出错时，result即是对应的路线规划方案
                if (status === 'complete') {
                    console.log('绘制驾车路线完成')
                } else {
                    console.error('获取驾车数据失败：' + result)
                }
            })
        });
    }
    render(){
        return (
            <div className="map-view">
                <div id="map-driving" style={{width: '800px',height: '600px'}}></div>
                <div id="map-panel"></div>
            </div>
        );
    }
}

export {Location,Driving}