百度地图绘制行车路线

百度地图开发平台 http://lbsyun.baidu.com/
百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。免费对广大用户开放。
1、创建应用生成ak
2、在index.html中引用

<!-- 引入百度地图api -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=秘钥"></script>

3、在组件中使用
地图显示区

 <div id="orderDetailMap" className="order-map"></div>

绘制地图

//绘制地图
    renderMap = (result) => {
        this.map = new window.BMap.Map('orderDetailMap');
        // this.map.centerAndZoom('北京', 11);
        // 添加地图控件
        this.addMapControl();
        // 调用路线图绘制方法
        this.drawBikeRoute(result.position_list);
        // 调用服务区绘制方法
        this.drwaServiceArea(result.area);
    }
    // 添加地图控件
    addMapControl = () => {
        let map = this.map;
        map.addControl(new window.BMap.ScaleControl({ anchor: window.BMAP_ANCHOR_TOP_RIGHT }));
        map.addControl(new window.BMap.NavigationControl({ anchor: window.BMAP_ANCHOR_TOP_RIGHT }));
    }
    // 绘制用户的行驶路线
    drawBikeRoute = (positionList) => {
        let startPoint = '';
        let endPoint = '';
        if (positionList.length > 0) {
            let first = positionList[0];
            let last = positionList[positionList.length - 1];
            startPoint = new window.BMap.Point(first.lon, first.lat);
            let startIcon = new window.BMap.Icon('/assets/start_point.png', new window.BMap.Size(36, 42), {
                imageSize: new window.BMap.Size(36, 42),
                anchor: new window.BMap.Size(18, 42)
            })
            //起点
            let startMarker = new window.BMap.Marker(startPoint, { icon: startIcon });
            this.map.addOverlay(startMarker);

            endPoint = new window.BMap.Point(last.lon, last.lat);
            let endIcon = new window.BMap.Icon('/assets/end_point.png', new window.BMap.Size(36, 42), {
                imageSize: new window.BMap.Size(36, 42),
                anchor: new window.BMap.Size(18, 42)
            })
            //终点
            let endMarker = new window.BMap.Marker(endPoint, { icon: endIcon });
            this.map.addOverlay(endMarker);

            // 连接路线图
            let trackPoint = [];
            positionList.map((point)=>{
                trackPoint.push(new window.BMap.Point(point.lon, point.lat));
            })
            // for (let i = 0; i < positionList.length; i++) {
            //     let point = positionList[i];
            //     trackPoint.push(new window.BMap.Point(point.lon, point.lat));
            // }

            let polyline = new window.BMap.Polyline(trackPoint, {
                strokeColor: '#1869AD',
                strokeWeight: 3,
                strokeOpacity: 1
            })
            this.map.addOverlay(polyline);//折线
            this.map.centerAndZoom(endPoint, 11);//根据终点定位地图中心
        }
    }
    // 绘制服务区
    drwaServiceArea = (positionList)=>{
        // 连接路线图
        let trackPoint = [];
        positionList.map((point)=>{
            trackPoint.push(new window.BMap.Point(point.lon, point.lat));
        })
        // 绘制服务区
        let polygon = new window.BMap.Polygon(trackPoint, {
            strokeColor: '#CE0000',
            strokeWeight: 4,
            strokeOpacity: 1,
            fillColor: '#ff8605',
            fillOpacity:0.4
        })
        this.map.addOverlay(polygon);
    }