自定义公交路线途经点

<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.TransitRoute(map, {
        renderOptions:{
            map: map, 
            autoViewport: true
        }
    });

    // driving.search(p1, p2,{
    //     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
            });//waypoints表示途经点
        alert("绘制完成");
        doneDraw = 10;
        //polyline.enableEditing();// 设置可编辑
    });
</script>
自定义公交路线途经点

猜你喜欢
