百度地图显示起始点和终点的路径规划

最新推荐文章于 2024-05-24 18:01:54 发布

曲之不尽

最新推荐文章于 2024-05-24 18:01:54 发布

阅读量952

点赞数

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/weixin_44440780/article/details/124492174

版权

这篇博客介绍了如何在HTML中引用JavaScript代码来实现地图上的路线加载和连线功能。`loadLine`函数接受起点和终点的经纬度参数，利用BMap库创建驾车路线，并将路径点转化为字符串。`line`函数则根据传入的坐标点字符串绘制折线。整个过程涉及地图API的使用和路径处理，便于在网页中展示地理信息。

摘要由CSDN通过智能技术生成

初始化完地图以后，将以下代码封装为一个js，在html中引用该js，直接调用封装好的方法，传入对应的值即可。

var longpatStr
var reg = /,$/gi; //此处是正则

/**
* a,b是起点的经度和纬度，c,d是终点的经度和纬度
* @param a,b,c,d
*/
function loadLine(a,b,c,d) {
    var myP1 = new BMap.Point(parseFloat(a), parseFloat(b)); //起点
    var myP2 = new BMap.Point(parseFloat(c), parseFloat(d)); //终点
    var driving = new BMap.DrivingRoute(map, {
        onSearchComplete: function (results) {
            if (driving.getStatus() == BMAP_STATUS_SUCCESS) {
                longpatStr = "";
                var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); //通过驾车实例，获得一系列点的数组
                var paths = pts.length;
                for (var i = 0; i < paths; i++) {
                    console.log(pts[i].lng + " " + pts[i].lat);
                    longpatStr += parseFloat(pts[i].lat) + "|" + parseFloat(pts[i].lng) + ","
                }
                longpatStr = longpatStr.replace("undefined", "");
                longpatStr = longpatStr.replace(reg, "");
                $("#point").val(longpatStr)
                line(longpatStr)
            }

        }
    }, {
        renderOptions: {
            map: map,
            autoViewport: true
        }
    });
    //驾车实例
    driving.search(myP1, myP2);
}

/**
 * 连线
 * @param lonlat
 */
function line(lonlat) {
    var co = lonlat.split(",");
    var pointAttr = new Array();
    for (var i = 0; i < co.length - 1; i++) {
        var loglats = co[i].split("|")
        var point = new BMap.Point(loglats[1], loglats[0])
        pointAttr.push(point);
    }
    var polyline = new BMap.Polyline(pointAttr, {
        strokeColor: "#cc0000",
        strokeWeight: 5,
        strokeOpacity: 0.5
    });
    map.addOverlay(polyline);
}