JS百度地图API开发：展示一起点多终点的驾车导航路线显示与时间计算，并按时间长短排列（超详细）

本文链接：https://blog.csdn.net/weixin_57754287/article/details/134035002

首先要自己在百度地图控制台申请一个自己的密钥，替换掉代码中间的密钥。这段代码需要注意的就是按照时间的长短排列，这份代码无论怎么刷新都不会乱掉排序顺序。代码注释解释的非常详细，大家自己看就行了。有什么不懂的可以留言在评论区。以下是运行结果。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>百度地图API示例</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=(这块儿连着括号一起换成在百度地图控制台申请的密钥)"></script>
    <!-- 引入百度地图API -->

    <style type="text/css">
        #map {
            width: 100%;
            height: 600px;
            margin: 0 auto;
        }
        .route {
            margin-bottom: 10px;
        }
        .route span {
            display: inline-block;
            width: 100px;
            text-align: right;
            margin-right: 10px;
        }
    </style>
    <!-- 页面样式 -->

</head>
<body>
    <div id="map"></div>
    <!-- 地图展示容器 -->
    <div id="result"></div>
    <!-- 结果展示容器 -->

    <script type="text/javascript">
        // 初始化地图
        var map = new BMap.Map("map");
        // 创建地图实例
        var point = new BMap.Point(121.571149, 38.920014); // 辽宁师范大学
        // 创建地图中心点坐标
        map.centerAndZoom(point, 12);
        // 设置地图中心点和缩放级别

        // 添加起点和终点
        var locations = [
            { name: "辽宁师范大学", point: point },
            { name: "大连市中山医院", point: new BMap.Point(121.655157, 38.922953) },
            { name: "大连市第二人民医院", point: new BMap.Point(121.627698, 38.924042) },
            { name: "大连医科大学附属第一医院", point: new BMap.Point(121.779814, 39.061763) },
            { name: "大连市第七人民医院", point: new BMap.Point(121.529422, 38.881951) }
        ];
        // 设置起点和终点的名称和坐标

        var startMarker = new BMap.Marker(point);
        // 创建起点标记
        map.addOverlay(startMarker);
        // 在地图上添加起点标记
        var startLabel = new BMap.Label("辽宁师范大学", { offset: new BMap.Size(20, -10) });
        // 设置起点标记的标签
        startMarker.setLabel(startLabel);
        // 在起点标记上添加标签

        locations.shift(); // 去除第一个元素，即起点
        // 移除数组中的第一个元素，即移除起点信息

        // 计算驾车时间
        calculateDrivingTime(locations).then(function(updatedLocations) {
            // 排序
            updatedLocations.sort(function(a, b) {
                return Math.ceil(a.time / 60) - Math.ceil(b.time / 60);
            });
            // 根据驾车时间进行排序

            updatedLocations.forEach(function(location) {
                var endMarker = new BMap.Marker(location.point);
                // 创建终点标记
                map.addOverlay(endMarker);
                // 在地图上添加终点标记
                var label = new BMap.Label(location.name, { offset: new BMap.Size(20, -10) });
                // 设置终点标记的标签
                endMarker.setLabel(label);
                // 在终点标记上添加标签

                var content = "<p>驾车路线：起点——辽宁师范大学，终点——" + location.name + "，时间：" + Math.ceil(location.time / 60) + "分钟，距离：" + Math.ceil(location.distance / 1000) + "公里</p>";
                // 构造结果的HTML内容
                document.getElementById("result").innerHTML += content;
                // 在结果容器中展示内容

                // 调整地图视野
                var bounds = new BMap.Bounds(point, location.point);
                // 创建视野范围对象
                map.setViewport(bounds);
                // 调整地图视野范围
            });
        }).catch(function(error) {
            console.log(error);
        });

        // 添加鼠标滚轮缩放地图的功能
        map.enableScrollWheelZoom();

        function calculateDrivingTime(locations) {
            // 计算驾车时间
            return new Promise(function(resolve, reject) {
                var updatedLocations = [];
                // 存储更新后的位置信息
                var count = 0;

                locations.forEach(function(location, index) {
                    calculateDrivingRoute(point, location.point, function(result) {
                        var time = result.time;
                        var distance = result.distance;

                        if (time !== undefined) {
                            updatedLocations.push(Object.assign({}, location, { time: time, distance: distance }));
                        }

                        count++;

                        if (count === locations.length) {
                            resolve(updatedLocations);
                        }
                    });
                });
            });
        }

        function calculateDrivingRoute(startPoint, endPoint, callback) {
            // 计算驾车路线
            var driving = new BMap.DrivingRoute(map, {
                renderOptions: {
                    map: map,
                    autoViewport: false // 设置为false，不自动调整地图视野
                },
                onSearchComplete: function(result) {
                    if (driving.getStatus() === BMAP_STATUS_SUCCESS) {
                        var time = result.getPlan(0).getDuration(false);
                        var distance = result.getPlan(0).getDistance(false);
                        callback({ time: time, distance: distance });
                    }
                }
            });
            driving.search(startPoint, endPoint);
            // 搜索驾车路线
        }
    </script>
</body>
</html>