自定义驾车（公交）路线途经点

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=eYf9sA6yVTFHlh9ytU4a0EYY"></script>
<title>自定义驾车（公交）路线途经点</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    //地图中心
    map.centerAndZoom(new BMap.Point(109.703348,28.265934), 20);
    //可滚轮缩放
    map.enableScrollWheelZoom();
    var points = []; //用来存储折线的点
    var polyline;   //添加线
    var doneDraw = 0; //判断是否绘制折线结束
    var point1;    // 起点
    var flag = true; //判断是否第一次点击
    // let pathPoint = [
    //         new BMap.Point(109.704558,28.26863),
    //         new BMap.Point(109.708855,28.263623),
    //         new BMap.Point(109.710557,28.261261)
    //     ];
    // console.log(pathPoint)
    // var driving = new BMap.DrivingRoute(map, {
    //     renderOptions:{
    //         map: map, 
    //         autoViewport: true
    //     }
    // });
        var driving = new BMap.DrivingRoute( map, {
            renderOptions:{
                map: map, 
                autoViewport: true,
                enableDragging : true //起终点可进行拖拽
            }
        }, 
        {
            onSearchComplete: function(results){
              if (driving.getStatus() == BMAP_STATUS_SUCCESS){
                    var plan = driving.getResults().getPlan(0);
                    var  num = plan.getNumRoutes();
                    console.log("plan.num ："+num);
                    for(var j = 0; j < num; j++ ){
                        var pts= plan.getRoute(j).getPath();    //通过驾车实例，获得一系列点的数组
                        var polyline = new BMap.Polyline(pts);    
                        map.addOverlay(polyline); 
                    }
              }
        }});
    function showPoly(pointList){
        //循环显示点对象
        // for(c=0;c<pointList.length;c++){
        //     var marker = new BMap.Marker(pointList[c]);
        //     map.addOverlay(marker);
        //     //将途经点按顺序添加到地图上
        //     var label = new BMap.Label(c+1,{offset:new BMap.Size(20,-10)});
        //     marker.setLabel(label);
        // }

       var  group = Math.floor( pointList.length /11 ) ;
       var mode = pointList.length %11 ;


        for(var i =0;i<group;i++){
           var waypoints = pointList.slice(i*11+1,(i+1)*11);
           //注意这里的终点如果是11的倍数的时候，数组可是取不到最后一位的，所以要注意终点-1喔。感谢song141的提醒，怪我太粗心大意了~
           driving.search(pointList[i*11], pointList[(i+1)*11-1],{waypoints:waypoints});//waypoints表示途经点
        }   
        if( mode != 0){
            var waypoints = pointList.slice(group*11,pointList.length-1);//多出的一段单独进行search
            driving.search(pointList[group*11],pointList[pointList.length-1],{waypoints:waypoints});
        }

    }
    // 绘制marker（起点、经点、终点）
    function drawPoint(point){
        let marker = new BMap.Marker(point);
        this.map.addOverlay(marker);
    } 
    //地图单击事件  
    map.addEventListener("click", function (e) {
        console.log(e.point.lng + ", " + e.point.lat);
        //drawPoint(new BMap.Point(e.point.lng,e.point.lat))
        // 存第一次点击为起点
        if(flag){ 
             flag = false;
             point1 = new BMap.Point(e.point.lng,e.point.lat);
         }
        //判断是否绘制曲线完毕
        if (doneDraw == 0) { 
            //存储曲线上每个点的经纬度
            points.push(new BMap.Point(e.point.lng, e.point.lat)) 
            if (polyline) { 
                polyline.setPath(points); 
            } //如果曲线存在，则获取折线上的点 setPath(points)
            else { 
                polyline = new BMap.Polyline(points); 
            } //如果折线不存在，就增加此点
            if (points.length < 2) { 
                return; 
            } //当折线上的点只有一个时，不绘制
            //map.addOverlay(polyline); //绘制曲线
        }
    });
    //当鼠标双击时：结束绘制，并可以编辑曲线
    map.addEventListener("dblclick", function (e) { 
        console.log("dblclick" + ", " + e.point.lng + ", " + e.point.lat)
        // 存最后一次点击为终点
        var point2 = new BMap.Point(e.point.lng,e.point.lat);
        //drawPoint(new BMap.Point(e.point.lng,e.point.lat))
        // driving.search(
        //     point1, 
        //     point2,
        //     {
        //         waypoints:points //points表示途经点
        //     });
        //alert("绘制完成");
        doneDraw = 10;
        showPoly(points)
        //polyline.enableEditing();// 设置可编辑
    });
</script>
自定义驾车（公交）路线途经点

猜你喜欢
