H5新特性百度地图SDK--API引入、地图控件、地理编码与逆地理编码、地图标注、路径规划（基于2.0）

小白小白从不日白

已于 2022-05-28 20:15:33 修改

阅读量3.3k

点赞数 1

分类专栏： html+css 文章标签： H5新特性

于 2021-07-19 10:31:53 首次发布

本文链接：https://blog.csdn.net/weixin_43285360/article/details/118889663

版权

html+css 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

一、API基本使用

1.1 大致流程

打开，百度地图官网

登录或者注册一个百度账号，并完成相关验证

登陆并申请成为开发者

在百度地图开发平台的首页选择控制台，在控制台中创建应用

创建好应用以后就能在控制台我的应用中看到这个应用，其中最重要的是AK，这是百度地图分配给我们应用的一个专用的秘钥，必须使用秘钥才能访问百度地图API

完成以上基础操作后，具体的操作流程请参考：jspopularGL | 百度地图API SDK

1.2 基本用法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #container {
        width: 700px;
        height: 500px;
        border: 1px solid black;
      }
    </style>
    <script type="text/javascript"
    src="http://api.map.baidu.com/api?v=1.0&type=webgl&ak=9N1GiH5wT8CqN7axx9F7VQNy1H281i8b"></script>
  </head>
  <body>
    <div id="container"></div>

    <script>
      // 创建地图实例
      var map = new BMapGL.Map("container");

      // 通过地理位置的经纬度创建点坐标
      var point = new BMapGL.Point(116.404, 39.915);

      // 初始化地图，设置中心点坐标和地图级别
      map.centerAndZoom(point, 15);

      // 添加比例尺控件
      var scaleCtrl = new BMapGL.ScaleControl();
      map.addControl(scaleCtrl);

      // 添加缩放控件
      var zoomCtrl = new BMapGL.ZoomControl(); 
      map.addControl(zoomCtrl);

      // 添加城市列表控件
      var cityCtrl = new BMapGL.CityListControl(); 
      map.addControl(cityCtrl);

      // 添加定位控件
      var locationControl = new BMapGL.LocationControl();
      map.addControl(locationControl);

      //开启鼠标滚轮缩放
      map.enableScrollWheelZoom(true);
      
      // 设置地图类型为地球模式
      map.setMapType(BMAP_EARTH_MAP);
    </script>
  </body>
</html>

二、地图控件

 #container {
            width: 700px;
            height: 500px;
            border: 1px solid black;
        }

<button>加载地图</button>
    <div id="container"></div>

<script type="text/javascript"
    src="http://api.map.baidu.com/api?v=1.0&type=webgl&ak=9N1GiH5wT8CqN7axx9F7VQNy1H281i8b"></script>

2.1 系统控件

//平移控件

map.addControl(new BMap.NavigationControl());

//缩放控件

map.addControl(new BMap.ScaleControl());

//缩略地图控件

map.addControl(new BMap.OverviewMapControl());

//地图类型控件

map.addControl(new BMap.MapTypeControl());
// 添加城市列表控件
map.addControl(new BMap.CityListControl());

示例：

<script>
        document.querySelector('button').onclick = function() {
            //创建地图实例
            var map = new BMap.Map("container");

            //设置中心点坐标
            var point = new BMap.Point(116.404, 39.915);

            //地图初始化，同时设置地图展示级别
            map.centerAndZoom(point, 18);

            //开启鼠标滚轮缩放
            map.enableScrollWheelZoom(true);

            //平移控件
            map.addControl(new BMap.NavigationControl());

            //缩放控件
            map.addControl(new BMap.ScaleControl());

            //缩略地图控件
            map.addControl(new BMap.OverviewMapControl());

            //地图类型控件
            map.addControl(new BMap.MapTypeControl());

            // 添加城市列表控件
            map.addControl(new BMap.CityListControl());

           
        };
       
    </script>

2.2 自定义摆放的系统控件的位置

自定义摆放位置有三个字段可选

anchor :控件摆放位置

BMAP_ANCHOR_TOP_LEFT：表示控件定位于地图的左上角
BMAP_ANCHOR_TOP_RIGHT：表示控件定位于地图的右上角
BMAP_ANCHOR_BOTTOM_LEFT：表示控件定位于地图的左下角
BMAP_ANCHOR_BOTTOM_RIGHT：表示控件定位于地图的右下角

offset ：控件偏移位置

除了指定停靠位置外，还可以通过偏移量来指示控件距离地图边界有多少像素

如果两个控件的停靠位置相同，那么控件可能会重叠在一起，这时就可以通过偏移值使二者分开显示。

var opts = {
    offset: new BMapGL.Size(150, 5)
}
// 添加控件
map.addControl(new BMapGL.ScaleControl(opts));
// 移除控件
map.removeControl(new BMapGL.ScaleControl(opts));

type ：控件加载类型

BMAP_NAVIGATION_CONTROL_LARGE 表示显示完整的平移控件
BMAP_NAVIGATION_CONTROL_SMALL 表示显示小型的平移缩放控件
BMAP_NAVIGATION_CONTROL_PAN 表示只显示控件的部分平移功能
BMAP_NAVIGATION_CONTROL_ZOOM 表示只显示控件的部分缩放功能

var options={

             anchor:BMAP_ANCHOR_BOTTOM_RIGHT,

             offset:new BMap.Size(150, 5),

             type:BMAP_NAVIGATION_CONTROL_SMALL

             };

             map.addControl(new BMap.NavigationControl(options));

             //比例尺位置

            var options={

                anchor:BMAP_ANCHOR_TOP_LEFT,

                offset:new BMap.Size(75,15)

            };

map.addControl(new BMap.ScaleControl(options));

示例：

 <script>
        document.querySelector('button').onclick = function() {
            //创建地图实例
            var map = new BMap.Map("container");

            //设置中心点坐标
            var point = new BMap.Point(116.404, 39.915);

            //地图初始化，同时设置地图展示级别
            map.centerAndZoom(point, 18);

            //开启鼠标滚轮缩放
            map.enableScrollWheelZoom(true);

            

            var options = {
                //右下角
                anchor: BMAP_ANCHOR_BOTTOM_RIGHT,

                //位置
                offset: new BMap.Size(150, 5),

                //显示完整的平移控件
                type: BMAP_NAVIGATION_CONTROL_SMALL
            };

            // 添加平移控件
            map.addControl(new BMap.NavigationControl(options));

            //比例尺位置
            var options = {
                // 左上角
                anchor: BMAP_ANCHOR_TOP_LEFT,

                // 位置
                offset: new BMap.Size(75, 15),

                //显示完整的平移控件
                type: BMAP_NAVIGATION_CONTROL_SMALL
            };

            // 添加缩放控件
            map.addControl(new BMap.ScaleControl(options));

           
        };
       
    </script>

2.3 自定义控件

2.3.1 流程

1.定义一个自定义控件的构造函数并继承Control

自定义构造函数中要提供defaultAnchor和defaultOffset两个属性，以便API正确定位控件位置，接着让其继承于Control。

2.初始化自定义控件

设置自定义控件构造函数的prototype属性为Control的实例，以便继承控件基类；当调用map.addControl()添加自定义控件时，API会调用该对象的initialize()方法用来初始化控件，你需要实现此方法并在其中创建控件所需的DOM元素，并添加DOM事件；所有自定义控件中的DOM元素最终都应该添加到地图容器（也就是地图所在的DOM元素）中去，地图容器可以通过map.getContainer()方法获得；最后initialize()方法需要返回控件容器的DOM元素

3.添加自定义控件

使用map.addControl();方法

示例：

 <script>
        document.querySelector('button').onclick = function() {
            //创建地图实例
            var map = new BMap.Map("container");

            //设置中心点坐标
            var point = new BMap.Point(116.404, 39.915);

            //地图初始化，同时设置地图展示级别
            map.centerAndZoom(point, 18);

            //开启鼠标滚轮缩放
            map.enableScrollWheelZoom(true);

            
            // 定义一个控件类，即function
            function ZoomControl() {
                // 设置默认停靠位置和偏移量
                this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
                this.defaultOffset = new BMap.Size(10, 10);
            }

            // 通过JavaScript的prototype属性继承于BMap.Control
            ZoomControl.prototype = new BMap.Control();

            // 自定义控件必须实现initialize方法，并且将控件的DOM元素返回
            // 在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中
            ZoomControl.prototype.initialize = function(map) {
                // 创建一个DOM元素
                var div = document.createElement("div");

                // 添加文字说明
                div.appendChild(document.createTextNode("放大2级"));

                // 设置样式
                div.style.cursor = "pointer";
                div.style.border = "1px solid gray";
                div.style.backgroundColor = "white";

                // 绑定事件，点击一次放大两级
                div.onclick = function(e) {
                    map.zoomTo(map.getZoom() + 2);
                };

                // 添加DOM元素到地图中
                map.getContainer().appendChild(div);

                // 将DOM元素返回
                return div;
            };

            // 创建控件实例
            var myZoomCtrl = new ZoomControl();

            // 添加到地图当中
            map.addControl(myZoomCtrl);
        }
</script>

更多详细内容请参考官方文档：https://lbs.baidu.com/index.php?title=jspopularGL/guide/

三、地理编码与逆地理编码

地址解析服务提供从地址转换到经纬度的服务，反之，逆地址解析则提供从经纬度坐标转换到地址的转换功能

提供的转换类：

Geocoder：逆/地址解析，用于坐标与地址间的相互转换

 #container {
            width: 700px;
            height: 500px;
            border: 1px solid black;
        }

 <button>加载地图</button>
    <div id="container"></div>

3.1 地址解析服务

根据地址描述获得坐标信息：

百度地图API提供Geocoder类进行地址解析，可以通过Geocoder.getPoint()方法来将一段地址描述转换为一个坐标

注意：在调用Geocoder.getPoint()方法时您需要提供地址解析所在的城市（本例为“北京市”）。

var map = new BMapGL.Map('container');
map.centerAndZoom(new BMapGL.Point(116.331398,39.897445), 12);
//创建地址解析器实例
var myGeo = new BMapGL.Geocoder();
// 将地址解析结果显示在地图上，并调整地图视野
myGeo.getPoint('北京市海淀区上地10街', function(point){
    if(point){
        map.centerAndZoom(point, 16);
        map.addOverlay(new BMapGL.Marker(point, {title: '北京市海淀区上地10街'}))
    }else{
        alert('您选择的地址没有解析到结果！');
    }
}, '北京市')

示例：

 <script>
        document.querySelector('button').onclick = function() {
            var map = new BMap.Map("container");
            var point = new BMap.Point(116.404, 39.915);
            map.centerAndZoom(point, 15);
            map.addControl(new BMap.NavigationControl());


            var geoc = new BMap.Geocoder();
            map.addEventListener('click', function(eve) {
                // console.log(eve.point);

                //逆地理解析服务方法--本方法的作用是传入一个坐标点，返回坐标点的具体地址描述
                geoc.getLocation(eve.point, function(info) {
                    console.log(info);
                });
            });

          
</script>

逆地址解析服务：

根据坐标点获得该地点的地址描述，是地址解析的逆向转换

可以通过Geocoder.getLocation()方法获得地址描述

当解析工作完成后，您提供的回调函数将会被触发

如果解析成功，则回调函数的参数为GeocoderResult对象，否则为null

指定经纬度获取地址

var map = new BMapGL.Map("container");      
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);      
// 创建地理编码实例      
var myGeo = new BMapGL.Geocoder();      
// 根据坐标得到地址描述    
myGeo.getLocation(new BMapGL.Point(116.364, 39.993), function(result){      
    if (result){      
      alert(result.address);      
    }      
});

鼠标点击地图获取地址

var map = new BMapGL.Map('container');
map.centerAndZoom(new BMapGL.Point(116.331398,39.897445), 13);
var geoc = new BMapGL.Geocoder();
map.addEventListener('click', function(e){
    var pt = e.latlng;
    geoc.getLocation(pt, function(rs){
        var addComp = rs.addressComponents;
        alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
    })
})

示例：

<script>
        document.querySelector('button').onclick = function() {
            var map = new BMap.Map("container");
           
            map.addControl(new BMap.NavigationControl());


           


            var geoc = new BMap.Geocoder();

            var addressStr = '北京市东城区东四南大街157号';

            //地址解析方法--传入一个具体的地址描述，返回这个地址的坐标点
            geoc.getPoint(addressStr, function(point) {
                console.log(point);
                map.centerAndZoom(point, 15);
            }, '北京市');
        };
</script>

四、地图标注

所有叠加或覆盖到地图的内容，我们统称为地图覆盖物。覆盖物拥有自己的地理坐标，当您拖动或缩放地图时，它们会相应的移动。

覆盖物主要分为：标注（点标注、折线、多边形、圆、文本标注）、信息窗口、图层。

提供的文本标注

Label：一个用来往地图上添加文本标注的类，可以自定义标注的文本内容

4.1 提供覆盖物

可以使用map.addOverlay方法向地图添加覆盖物，使用map.removeOverlay方法移除覆盖物，注意此方法不适用于InfoWindow

4.2 添加文本标注

API提供了默认的标注样式，您也可以通过setStyle来指定自定义样式。

1.向地图中添加标注

var map = new BMap.Map("container");    
var point = new BMap.Point(116.404, 39.915);    
map.centerAndZoom(point, 15);    
var marker = new BMap.Marker(point);        // 创建标注    
map.addOverlay(marker);                     // 将标注添加到地图中

2.定义标注图标

通过Icon类可实现自定义标注的图标，下面示例通过参数MarkerOptions的icon属性进行设置，您也可以使用marker.setIcon()方法。

var map = new BMap.Map("container");    
var point = new BMap.Point(116.404, 39.915);    
map.centerAndZoom(point, 15);  // 编写自定义函数，创建标注   
function addMarker(point, index){  // 创建图标对象   
    var myIcon = new BMap.Icon("markers.png", new BMap.Size(23, 25), {    
        // 指定定位位置。   
        // 当标注显示在地图上时，其所指向的地理位置距离图标左上    
        // 角各偏移10像素和25像素。您可以看到在本例中该位置即是   
        // 图标中央下端的尖角位置。    
        anchor: new BMap.Size(10, 25),    
        // 设置图片偏移。   
        // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您   
        // 需要指定大图的偏移位置，此做法与css sprites技术类似。    
        imageOffset: new BMap.Size(0, 0 - index * 25)   // 设置图片偏移    
    });      
    // 创建标注对象并添加到地图   
    var marker = new BMap.Marker(point, {icon: myIcon});    
    map.addOverlay(marker);    
}    
// 随机向地图添加10个标注    
var bounds = map.getBounds();    
var lngSpan = bounds.maxX - bounds.minX;    
var latSpan = bounds.maxY - bounds.minY;    
for (var i = 0; i < 10; i ++) {    
    var point = new BMap.Point(bounds.minX + lngSpan * (Math.random() * 0.7 + 0.15),    
                                  bounds.minY + latSpan * (Math.random() * 0.7 + 0.15));    
    addMarker(point, i);    
}

3.监听标注事件

JSAPI支持监听覆盖物的事件。

label.addEventListener("click", function(){  
    alert("您点击了标注");  
});

4.可拖拽的标注

marker的enableDragging和disableDragging方法可用来开启和关闭标注的拖拽功能。默认情况下标注不支持拖拽，您需要调用marker.enableDragging()方法来开启拖拽功能。在标注开启拖拽功能后，您可以监听标注的dragend事件来捕获拖拽后标注的最新位置

marker.enableDragging();    
marker.addEventListener("dragend", function(e){    
    alert("当前位置：" + e.point.lng + ", " + e.point.lat);    
})

4.3 标注折线

Polyline表示地图上的折线覆盖物。它包含一组点，并将这些点连接起来形成折线

添加折线：

折线在地图上绘制为一系列直线段。可以自定义这些线段的颜色、粗细和透明度。颜色可以是十六进制数字形式（比如：#ff0000）或者是颜色关键字（比如：red）。

Polyline的绘制需要浏览器支持矢量绘制功能。在Internet Explorer中，地图使用VML绘制折线；在其他浏览器中使用SVG或者Canvas。

以下代码段会在两点之间创建6像素宽的蓝色折线：

var polyline = new BMap.Polyline([
    new BMap.Point(116.399, 39.910),
    new BMap.Point(116.405, 39.920)
    ],
    {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}
    );
map.addOverlay(polyline);

示例1：默认标注/系统标注

<script>
        document.querySelector('button').onclick = function() {
            //创建地图实例
            var map = new BMap.Map("container");

            // 设置中心点坐标
            var point = new BMap.Point(116.404, 39.915);

            // 表示地图上的点
            var tempMarker = new BMap.Marker(point);

            // 向地图添加覆盖物
            map.addOverlay(tempMarker);

            // 地图初始化，同时设置地图展示级别
            map.centerAndZoom(point, 15);

            // 添加平移控件
            map.addControl(new BMap.NavigationControl());

            // 创建交通流量图层实例
            var traffic = new BMap.TrafficLayer();

            // 将图层添加到地图上
            map.addTileLayer(traffic);

            //1.添加默认标注
            map.addEventListener('click', function(eve) {
                var tempMarker = new BMap.Marker(eve.point);
                map.addOverlay(tempMarker);
            });

  };
</script>

示例2：自定义标注点

<script>
        document.querySelector('button').onclick = function() {
            //创建地图实例
            var map = new BMap.Map("container");

            // 设置中心点坐标
            var point = new BMap.Point(116.404, 39.915);

            // 表示地图上的点
            var tempMarker = new BMap.Marker(point);

            // 向地图添加覆盖物
            map.addOverlay(tempMarker);

            // 地图初始化，同时设置地图展示级别
            map.centerAndZoom(point, 15);

            // 添加平移控件
            map.addControl(new BMap.NavigationControl());

            // // 创建交通流量图层实例
            // var traffic = new BMap.TrafficLayer();

            // // 将图层添加到地图上
            // map.addTileLayer(traffic);

           


            //2.自定义标注点
            var tempPoint = new BMap.Point(116.424, 39.915);

            var tempIcon = new BMap.Icon('img/标注.gif', new BMap.Size(50, 50), {
                // 设置图片的偏移量
                imageOffset: new BMap.Size(-30, -10)
            });

            var tempMarker = new BMap.Marker(tempPoint, {
                icon: tempIcon
            });

            map.addOverlay(tempMarker);

            
        };
    </script>

示例3：marker标注的点击事件

<script>
        document.querySelector('button').onclick = function() {
            //创建地图实例
            var map = new BMap.Map("container");

            // 设置中心点坐标
            var point = new BMap.Point(116.404, 39.915);

            // 表示地图上的点
            var tempMarker = new BMap.Marker(point);

            // 向地图添加覆盖物
            map.addOverlay(tempMarker);

            // 地图初始化，同时设置地图展示级别
            map.centerAndZoom(point, 15);

            // 添加平移控件
            map.addControl(new BMap.NavigationControl());

            // // 创建交通流量图层实例
            // var traffic = new BMap.TrafficLayer();

            // // 将图层添加到地图上
            // map.addTileLayer(traffic);

            // //1.添加默认标注
            // map.addEventListener('click', function(eve) {
            //     var tempMarker = new BMap.Marker(eve.point);
            //     map.addOverlay(tempMarker);
            // });


            

            // map.addOverlay(tempMarker);

            //3.marker标注的点击事件
            map.addEventListener('click', function(eve) {
                    var tempMarker = new BMap.Marker(eve.point);

                    tempMarker.addEventListener('click', function(e) {

                        // 坐标信息
                        var opts = {
                            width: 250, // 信息窗口宽度
                            height: 100, // 信息窗口高度
                            title: "信息" // 信息窗口标题
                        };

                        var geoc = new BMap.Geocoder();

                        geoc.getLocation(e.point, function(info) {

                            // 传入地址信息
                            var str = info.address;

                            // 创建信息窗口对象
                            var infoWindow = new BMap.InfoWindow(str, opts);

                            // 打开信息窗
                            map.openInfoWindow(infoWindow, map.getCenter());
                        });

                        //阻止冒泡事件
                        event.stopPropagation();
                    });

                    map.addOverlay(tempMarker);
                })
                //4.marker允许拖动
            tempMarker.enableDragging();
        };
    </script>

更多详细信息请参考官方文档：jspopular | 百度地图API SDK

五、路径规划

提供的出行方式包括公交、驾车、步行

开发者可以使用我们提供的默认展示效果，也可通过结果面板或数据接口获取返回结果，自己编写实现界面。图片支持自定义。

5.1 提供的路线规划方式

路线规划方式	类名	简介
公交	TransitRoute	提供公交路线规划搜索服务
驾车	DrivingRoute	提供驾车路线规划服务
步行	WalkingRoute	提供步行路线规划服务

5.2 驾车路线规划

BMap.DrivingRoute提供驾车导航服务

与公交导航不同的是，驾车导航的搜索范围可以设置为省

1.使用服务示例

var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);    
var driving = new BMap.DrivingRoute(map, {    
    renderOptions: {    
        map: map,    
        autoViewport: true    
    }    
});    
driving.search("中关村", "天安门");

2.结果面板

方案描述会自动展示到页面上

var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);    
var driving = new BMap.DrivingRoute(map, {    
    renderOptions: {    
        map   : map,     
        panel : "results",    
        autoViewport: true    
    }    
});    
driving.search("中关村", "天安门");

3.数据接口

驾车导航服务也提供了丰富的数据接口，通过onSearchComplete回调函数可以得到BMap.DrivingRouteResult对象，它包含了驾车导航结果数据信息。

结果会包含若干驾车方案（目前仅提供一条方案），每条方案中包含了若干驾车线路（如果导航方案只包含一个目的地，那么驾车线路的个数就为1，如果方案包含若干个目的地，则驾车线路的个数会大于1

目前API尚不支持多个目的地的驾车导航）。

每条驾车线路又会包含一系列的关键步骤（BMap.Step），关键步骤描述了具体驾车行驶方案，可通过BMap.Step.getDescription()方法获得。

var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);    
var options = {    
    onSearchComplete: function(results){    
        if (driving.getStatus() == BMAP_STATUS_SUCCESS){    
            // 获取第一条方案   
            var plan = results.getPlan(0);      
            // 获取方案的驾车线路   
            var route = plan.getRoute(0);      
            // 获取每个关键步骤，并输出到页面   
            var s = [];    
            for (var i = 0; i < route.getNumSteps(); i ++){    
                var step = route.getStep(i);    
                s.push((i + 1) + ". " + step.getDescription());    
            }    
            document.getElementById("log").innerHTML = s.join("<br>");    
        }    
    }    
};    
var driving = new BMap.DrivingRoute(map, options); 
driving.search("中关村","天安门");

5.3 公交路线规划

BMap.TransitRoute类提供公交导航搜索服务

在搜索之前需要指定搜索区域。注意：公交导航的区域范围只能是市，而不能是省

如果搜索区域为BMap.Map对象，路线结果会自动添加到地图上。如果您提供了结果容器，相应的路线描述也会展示在页面上

1.使用服务示例

var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);    
var transit = new BMap.TransitRoute(map, {    
    renderOptions: {map: map}    
});    
transit.search("王府井", "西单");

2.结果面板

可以提供用于展示文字结果的容器元素，方案结果会自动在页面中展现：

var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);    
var transit = new BMap.TransitRoute(map, {    
    renderOptions: {map: map, panel: "results"}    
});    
transit.search("王府井", "西单");

3.数据接口

可通过数据接口获取详细的公交方案信息

公交导航搜索结果用BMap.TransitRouteResult来表示，其中包含了若干公交出行方案（BMap.TransitRoutePlan）

每条出行方案由步行线路和公交线路组成。在起点到上车点之间、下车点到终点之间以及每个换乘站之间都会存在步行线路，如果上述的某两点位置重合，那么其间的步行路线长度为0

如下示例，通过数据接口将第一条方案的路线添加到地图上，并将所有方案的描述信息输出到页面上

var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);    
var transit = new BMap.TransitRoute("北京市");    
transit.setSearchCompleteCallback(function(results){    
    if (transit.getStatus() == BMAP_STATUS_SUCCESS){    
        var firstPlan = results.getPlan(0);    
        // 绘制步行线路    
        for (var i = 0; i < firstPlan.getNumRoutes(); i ++){    
            var walk = firstPlan.getRoute(i);    
            if (walk.getDistance(false) > 0){    
                // 步行线路有可能为0  
                map.addOverlay(new BMap.Polyline(walk.getPoints(), {lineColor: "green"}));    
            }    
        }    
        // 绘制公交线路   
        for (i = 0; i < firstPlan.getNumLines(); i ++){    
            var line = firstPlan.getLine(i);    
           map.addOverlay(new BMap.Polyline(line.getPoints()));    
        }    
       // 输出方案信息  
        var s = [];    
        for (i = 0; i < results.getNumPlans(); i ++){    
            s.push((i + 1) + ". " + results.getPlan(i).getDescription());    
        }    
        document.getElementById("log").innerHTML = s.join("<br>");    
    }    
})    
transit.search("中关村", "国贸桥");

5.4步行路线规划

BMap.WalkingRoute提供步行线路规划服务

基本用法和驾车线路规划类似

1.使用服务示例

var map = new BMap.Map("container");    
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);    
    var walk = new BMap.WalkingRoute(map, {    
        renderOptions: {map: map}    
    });    
walk.search("王府井", "西单");

示例：

  #bdmap-contaniner {
            width: 700px;
            height: 500px;
            border: 1px solid black;
        }

<button class="createMap">加载地图</button>
    <br/>
    <label for="startPoint">
    起点：<input type="text"  id="startPoint"  value="天安门"/>
</label>
    <label for="endPoint">
    终点：<input type="text"  id="endPoint"  value="莱圳家园"/>
</label>
    <select>
    <option value="car">驾车</option>
    <option value="bus">公交</option>
    <option value="step">步行</option>
</select>
    <br/>
    <button class="route">开启规划路径</button>
    <div id="bdmap-contaniner"></div>

<script>
        //页面元素
        var startPoint_input = document.querySelector('#startPoint');
        var endPoint_input = document.querySelector('#endPoint');
        var routeType_select = document.querySelector('select');

        var bdmap = null;

        document.querySelector('.createMap').onclick = function() {

            // 创建地图实例
            bdmap = new BMap.Map('bdmap-contaniner');

            // 设置中心点
            var point = new BMap.Point(116.404, 39.915);

            // 地图初始化，同时设置地图展示级别
            bdmap.centerAndZoom(point, 15);

            // 添加平移控件
            bdmap.addControl(new BMap.NavigationControl());

            // 标识地图上的点
            var centerMarker = new BMap.Marker(point);


            centerMarker.addEventListener('click', function(eve) {

                // 生成相关信息窗口
                var opts = {
                    width: 250, // 信息窗口宽度
                    height: 100, // 信息窗口高度
                    title: "地点坐标" // 信息窗口标题
                };

                var infoWindow_content = '当前位置：(' + eve.point.lng + ',' + eve.point.lat + ')';

                // 创建信息窗口对象
                var infoWindow = new BMap.InfoWindow(infoWindow_content, opts);

                // 打开信息窗口
                bdmap.openInfoWindow(infoWindow, bdmap.getCenter());
            });

            // 加载进去
            bdmap.addOverlay(centerMarker);
        };

        //路径规划
        document.querySelector('.route').onclick = function() {
            // 获取输入框里的值
            var startPoint_value = startPoint_input.value;
            var endPoint_value = endPoint_input.value;
            var routeType_select_value = routeType_select.value;

            switch (routeType_select_value) {
                case 'car':
                    {
                        //驾车路线规划
                        var driving = new BMap.DrivingRoute(bdmap, {
                            renderOptions: {
                                map: bdmap,
                                autoViewport: true
                            }
                        });
                        //绘制
                        driving.search(startPoint_value, endPoint_value);
                    }
                    break;

                case 'bus':
                    {
                        var transit = new BMap.TransitRoute(bdmap, {
                            renderOptions: {
                                map: bdmap,
                                autoViewport: true
                            }
                        });
                        transit.search(startPoint_value, endPoint_value);
                    }
                    break;

                case 'step':
                    {
                        var walk = new BMap.WalkingRoute(bdmap, {
                            renderOptions: {
                                map: bdmap
                            }
                        });
                        walk.search(startPoint_value, endPoint_value);
                    }
                    break;
            }
        }
    </script>

更多详细信息请参考官方文档：jspopular | 百度地图API SDK

综合：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #container {
        width: 700px;
        height: 500px;
        border: 1px solid black;
      }
    </style>
    <script
      type="text/javascript"
      src="http://api.map.baidu.com/api?v=1.0&type=webgl&ak=9N1GiH5wT8CqN7axx9F7VQNy1H281i8b"
    ></script>
    <script src="./js/jquery-3.6.0.js"></script>
  </head>
  <body>
    <div id="container"></div>

    <script>
      // 创建地图实例
      var map = new BMapGL.Map("container");

      // 通过地理位置的经纬度创建点坐标
      var point = new BMapGL.Point(116.404, 39.915);

      // 初始化地图，设置中心点坐标和地图级别
      map.centerAndZoom(point, 15);

      // 添加比例尺控件
      var scaleCtrl = new BMapGL.ScaleControl();
      map.addControl(scaleCtrl);

      // 添加缩放控件
      var zoomCtrl = new BMapGL.ZoomControl();
      map.addControl(zoomCtrl);

      // 添加城市列表控件
      var cityCtrl = new BMapGL.CityListControl();
      map.addControl(cityCtrl);

      // 添加定位控件
      var locationControl = new BMapGL.LocationControl();
      map.addControl(locationControl);

      // 创建地理编码实例
      var myGeo = new BMapGL.Geocoder();

      //开启鼠标滚轮缩放
      map.enableScrollWheelZoom(true);

      // 设置地图类型为地球模式
      map.setMapType(BMAP_EARTH_MAP);

      //驾车路径规划对象
      //该对象一定在地图加载出来以后再创建 一般放在创建好地图对象map以后 而且一个网页最好只能创建一次 否则将无法清除上一次的规划路径
      let driving = new BMapGL.DrivingRoute(map, {
        renderOptions: { map: map, autoViewport: true },
      });

      // 定义一个全局变量保存当前的坐标
      let start;

      //获取当前地理位置 将地图中心点移动到定位位置
      var geolocation = new BMapGL.Geolocation(); //创建定位对象
      geolocation.getCurrentPosition(function (r) {
        //通过定位对象调用定位函数,回调函数形参r表示定位结果
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
          start = r.point;
          //如果定位成功
          var mk = new BMapGL.Marker(r.point); //创建标记,r是定位结果,r.point就是当前定位的地点
          map.addOverlay(mk); //将标记对象添加到地图上
          map.panTo(start); //将地图中心店移动到定位地点
          //   alert('您的位置：' + r.point.lng + ',' + r.point.lat);
        } else {
          alert("failed" + this.getStatus());
        }
      });

      // 定义一个全局变量保存结束时的坐标
      let end;

      // 点击地图的任意一个点，添加标记
      map.addEventListener("click", function (point) {
        //   console.log(point);
        let mk = new BMapGL.Marker(point.latlng);
        map.addOverlay(mk); //将标记对象添加到地图上
        //给添加到地图上的标记添加点击事件
        mk.addEventListener("click", function () {
          // 阻止事件传播
          window.event.stopPropagation();
          // 阻止事件的默认行为
          // window.event.preventDefault();

          // 将点击的这个位置的坐标保存在end中
          end = point.latlng;

          // 根据坐标得到地址描述
          myGeo.getLocation(end, function (result) {
            //funcation是一个回调函数 该回调函数在查找到了具体的地理信息之后才执行
            if (result) {
              // 添加信息窗口
              let opts = {
                width: 300,
                height: 120,
                title: "地址信息",
              };
              let content = `<div><h3>${result.address}</h3><input class="go" type="button" value="到这去" onclick="go()"></div>`;
              // 创建信息窗口对象
              let infoWindow = new BMapGL.InfoWindow(content, opts);
              // 打开信息窗口
              map.openInfoWindow(infoWindow, point.latlng);
            }
          });
        });
      });

      function go() {
        // 完成导航
        driving.search(start, end);
      }
    </script>
  </body>
</html>