百度地图 API 绘制路线

Question

后台拿到数据返回给了jsp页面，并且显示到了地图上 。

现在要根据两个位点。绘制出他们之间的路线。
有实现过这个功能的大神，给指点一下，如果有实例，那当热是最好了。

下面是 ： 我显示坐标的代码：

 <script type="text/javascript">
    var jsonArrayaf = document.getElementById("jsonArray").value;

    function orbit(){
        var jsonArraya = document.getElementById("jsonArray").value;
    
        var jsonArray = eval(jsonArraya);
    
        var points = [];
    
        var map = new BMap.Map("l-map");
    
        if (jsonArray != null) {
            for (var i = 0; i < jsonArray.length; i++) {
                (function(x) {
                    var point = new BMap.Point(jsonArray[x].longitude, jsonArray[x].latitude); // 创建点坐标  
                    map.centerAndZoom(point, 15);
                    var marker = new BMap.Marker(point);
                
                    points.push(point);
                    var opts = {
                        width : 250, // 信息窗口宽度  
                        height : 150, // 信息窗口高度  
                        title : '<span style="font-size:15px;color:#0A8021">'
                                + jsonArray[x].position + '</span>' // 信息窗口标题  
                    }
                    var dateti=jsonArray[x].datetime;
                    var datet=dateti.split(",");
                    var content = "时间:";
                    for(var j=0;j<datet.length;j++){
                    content+=""+datet[j]+"<br/>";
                    }
               // content+= "范围: "+ jsonArray[x].distance;
             
                    var info_Window = new BMap.InfoWindow(content, opts); // 创建信息窗口对象  
    
                    var mylable = new BMap.Label(jsonArray[x].position, {
                        offset : new BMap.Size(-40, 30)
                    });
                
                    mylable.setStyle({ //给label设置样式，任意的CSS都是可以的
                        fontSize : "14px", //字号
                        textAlign : "center", //文字水平居中显示
                        lineHeight : "14px", //行高，文字垂直居中显示
                        cursor : "pointer"
                    });
                    marker.setLabel(mylable);
                    map.addOverlay(marker);
                    // 百度地图的联动,在点击图标时,调用的方法。实现改变
                    marker.addEventListener("click", function() {
                        this.openInfoWindow(info_Window);
                    
                    });
    
                    
                })(i);
            }
        }}
    
    </script>

我的位点是存在json里面循环输出的，我需要修改哪里，才能实现，地图路线的绘制。

Answer 1

var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

var p1 = new BMap.Point(116.301934,39.977552);
var p2 = new BMap.Point(116.508328,39.919141);

var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
driving.search(p1, p2);

WalkingRoute 步行 TransitRoute 公交 DrivingRoute 驾车

Answer 2

如果点够密集的话可以使用折线图。

var polyline = new BMap.Polyline(jsonArray.map(function(item){
    return new BMap.Point(item.longitude, item.latitude);
}), {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
map.addOverlay(polyline);

把里面的for循环替换了试试吧。