调用百度地图获取路线，修改覆盖物样式

先上效果图


之后上源码，由于是第一次用地图的api，写的可能有点乱，大家理解下

(function ($) {
    $(function () {
        var map = new BMap.Map("l-map");            // 创建Map实例
        map.centerAndZoom(new BMap.Point(104.072267, 30.663453), 18);
        map.enableScrollWheelZoom(true); //启用滚轮放大缩小s
        //向地图中添加控件
        // var opts = {
        //     anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
        //     type: BMAP_ANCHOR_BOTTOM_RIGHT
        // }
        var dinwei = {
            anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
            offset: new BMap.Size(5, 145)
        }
        map.addControl(new BMap.GeolocationControl(dinwei));
        var markerArr = [
            {
                title: "咖啡一号店(倍特店)", point: "104.069728,30.676714", address: "成都市青羊区青龙街51号倍特康派1层", tel: "(028)86697801", data: "A", postalCode: "青羊区 610031"
            },
            {
                title: "咖啡一号店(威斯顿店)", point: "104.074035,30.630567", address: "成都市武侯区人民南路四段19号威斯顿联邦大厦1楼", tel: "(028)85268546", data: "B", postalCode: "武侯区　610041"
            },
            {
                title: "咖啡一号店(万象城店)", point: "104.121758,30.655886", address: "成都市成华区双庆路8号华润万象城B1层", tel: "(028)61390740", data: "C", postalCode: "成华区　610066"
            },
            {
                title: "咖啡一号店(群光广场店)", point: "104.083043,30.660061", address: "成都市锦江区东大街春熙路南段8号群光广场负一层", tel: "(028)86664095", data: "D", postalCode: "锦江区　610011"
            },
            {
                title: "咖啡一号店(万达百货店)", point: "104.080253,30.693255", address: "成都市金牛区一环路北三段1号万达广场F1层", tel: "(028)86697801", data: "E", postalCode: "金牛区　610036"
            },
            {
                title: "咖啡一号店(成都锦里店)", point: "104.056298,30.651383", address: "成都市武侯区武侯祠大街231号(近三国茶楼)", tel: "(028)85585132", data: "F", postalCode: "武侯区　610041"
            },
            {
                title: "咖啡一号店(成都宽窄巷子店)", point: "104.06044,30.669663", address: "成都市青羊区宽窄巷子文化保护区窄巷子22号", tel: "(028)86639529", data: "G", postalCode: "青羊区 610031"
            },
            {
                title: "咖啡一号店(成都兰桂坊店)", point: "104.091141,30.649138", address: "成都市锦江区滨江东路兰桂坊第17栋1楼", tel: "(028)84701848", data: "H", postalCode: "锦江区　610011"
            },
            {
                title: "咖啡一号店(成都远洋太古里店)", point: "104.086893,30.659196", address: "成都市锦江区中纱帽街8号成都远洋太古里1楼", tel: "(028)86006721", data: "K", postalCode: "锦江区　610011"
            },
            {
                title: "咖啡一号店(成都丰德国际广场店)", point: "104.077831,30.621667", address: "成都市武侯区新希望路7号丰德万瑞中心A座1层", tel: "(028)85512248", data: "J", postalCode: "武侯区　610041"
            },
            {
                title: "咖啡一号店(成都金沙西单百货店)", point: "104.006269,30.680143", address: "成都市青羊区苏坡东路7号西单商场1-2层", tel: "(028)86129382", data: "K", postalCode: "青羊区 610031"
            },
            {
                title: "咖啡一号店(雅颂居店)", point: "104.050251,30.558112", address: "成都市武侯区荣华北路299号", tel: "(028)85236047", data: "L", postalCode: "武侯区　610041"
            },
            {
                title: "咖啡一号店(成都金融城)", point: "104.072977,30.587139", address: "成都市武侯区天府大道北段966号天府国际金融中心8号楼内", tel: "(028)85987570", data: "M", postalCode: "武侯区　610041"
            },
            {
                title: "咖啡一号店(上海花园店)", point: "104.054934,30.619626", address: "成都市武侯区神仙树南路37号(中海名城对面)", tel: "(028)86031000", data: "N", postalCode: "武侯区　610041"
            },
            {
                title: "咖啡一号店(世豪广场店)", point: "104.052098,30.555797", address: "成都市武侯区剑南大道中段998号世豪广场1层", tel: "(028)65783034", data: "O", postalCode: "武侯区　610041"
            }

        ];
        var pointCore = new BMap.Point(104.072267, 30.663453);//创建中心点的坐标
        // 为数组对象添加相应的列表

        for (let i = 0; i < markerArr.length; i++) {
            //获取对象数组中的point中的坐标
            var p0 = markerArr[i].point.split(",")[0];
            var p1 = markerArr[i].point.split(",")[1];
            let pointCurrent = new BMap.Point(p0, p1); //获取遍历对象的坐标
            function getDistance(pointArray, pointCurrent) {  //获取距离
                return map.getDistance(pointArray, pointCurrent).toFixed(0);//调用getDistance，取小数点后两位
            }
            let distance = getDistance(pointCore, pointCurrent);//将获取到的距离放到变量中
            var shopStr = `
            <dt>
                <img src="../../images/map/icon-info-green.svg" class="first-top">
                    ${markerArr[i].title}
                <small>
                    ${markerArr[i].address}
                </small>
                <span class="distance">${distance} m</span>
                <div class="number">
                <span class="shop-number">${markerArr[i].data}</span>
                <img src="../../images/map/icon-pin-solid-green.svg">
                </div>
            </dt>
            `
            //将模版字符串添加到html页面中
            $(".shop-list").append(shopStr);
        }

        var point = new Array(); //存放标注点经纬信息的数组
        var marker = new Array(); //存放标注点对象的数组
        for (let i = 0; i < markerArr.length; i++) {
            var p0 = markerArr[i].point.split(",")[0];
            var p1 = markerArr[i].point.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来
            point[i] = new window.BMap.Point(p0, p1); //循环生成新的地图点
            var iconImg = new BMap.Icon('../../images/map/icon-pin-solid-grey.svg', new BMap.Size(32, 47), {    //设置坐标点的图片，偏移位置，大小
                anchor: new BMap.Size(16, 31),
                imageSize: new BMap.Size(32, 32)
            });
            marker[i] = new window.BMap.Marker(point[i], { icon: iconImg }); //按照地图点坐标生成标记
            var opts = {
                offset: new BMap.Size(10, 2) // 设置文本偏移量
            }
            // 设置地图上的文本标注
            var numLabel = new BMap.Label(markerArr[i].data, opts);
            numLabel.setStyle({     //设置文本标注的样式
                color: "white", //字体颜色
                fontSize: "16px",//字体大小 　　
                backgroundColor: "0.05", //文本标注背景颜色　
                border: "0",
                fontWeight: "bold" //字体加粗
            });
            marker[i].setLabel(numLabel);    //将文本标注添加到覆盖物中
            map.addOverlay(marker[i]);  //将覆盖物添加到地图中
        }
        $("dl").on("mouseover", "dt", function (e) {  //鼠标移入，高亮显示
            map.clearOverlays();//清除初始的标记物
            let shopNumber = $(this).find(".shop-number").text();//获取店铺的编号信息
            for (let i = 0; i < markerArr.length; i++) {
                let p0 = markerArr[i].point.split(",")[0];
                let p1 = markerArr[i].point.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来
                point[i] = new window.BMap.Point(p0, p1); //循环生成新的地图点
                if (markerArr[i].data == shopNumber) {//判断条件成功时覆盖物的图片为绿色的
                    var iconImg = new BMap.Icon('../../images/map/icon-pin-solid-green-map.svg', new BMap.Size(32, 47), {    //设置坐标点的图片，偏移位置，大小
                        anchor: new BMap.Size(16, 31),
                        imageSize: new BMap.Size(32, 32)
                    });
                } else {  //其他不成功的覆盖物的颜色时灰色的
                    var iconImg = new BMap.Icon('../../images/map/icon-pin-solid-grey.svg', new BMap.Size(32, 47), {    //设置坐标点的图片，偏移位置，大小
                        anchor: new BMap.Size(16, 31),
                        imageSize: new BMap.Size(32, 32)
                    });
                }
                marker[i] = new window.BMap.Marker(point[i], { icon: iconImg }); //按照地图点坐标生成标记
                var opts = {
                    offset: new BMap.Size(10, 2) // 设置文本偏移量
                }
                marker[i].enableMassClear();
                //设置地图上的文本标注
                var numLabel = new BMap.Label(markerArr[i].data, opts);
                numLabel.setStyle({     //设置文本标注的样式
                    color: "white", //字体颜色
                    fontSize: "16px",//字体大小 　　
                    backgroundColor: "0.05", //文本标注背景颜色　
                    border: "0",
                    fontWeight: "bold" //字体加粗
                });
                marker[i].setLabel(numLabel);    //将文本标注添加到覆盖物中
                map.addOverlay(marker[i]);  //将覆盖物添加到地图中
            }
        })

        var imgNode = $("dt").find(".number").eq(2); //将节点存储进去
        $("dl").on("click", "dt", function () {
            imgNode.prop("src", "../../images/map/icon-pin-solid-grey.svg"); //更改上次节点
            $(this).find(".number").find("img").prop("src", "../../images/map/icon-pin-solid-green-map.svg"); //本次的点击事件
            imgNode = $(this).find(".number").find("img"); //保存本次的节点
            let num = $(this).index(); //当前的列表下标
            // console.log(markerArr[num]);
            let p0 = markerArr[num].point.split(",")[0];
            let p1 = markerArr[num].point.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来
            point = new window.BMap.Point(p0, p1); //循环生成新的地图点
            map.panTo(point); //设置地图的中心点为当前的坐标
        })
        $("dl").on("click", ".first-top", function () {
            $(".details").show(0);
            $(".address").hide(0);
            $(".shop-list").hide(0)
            let num = $(this).parent().index();
            $(".store-details").find("h2").text(markerArr[num].title);
            $(".locality").text(markerArr[num].address);
            $(".postal-code").text(markerArr[num].postalCode)
            $(".phone-tel").text(markerArr[num].tel);
            $(".route-point").text(markerArr[num].point);
        })
        $(".header").on("click", "img", function () {
            $(this).parent().parent().hide(0);
            $(".address").show(0);
            $(".shop-list").show(0)
        })
        $(".route").on("click", function () {
            let coordinate = $(".route-point").text();
            console.log(coordinate);
            let p0 = coordinate.split(",")[0];
            let p1 = coordinate.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来
            point1 = new window.BMap.Point(p0, p1); //循环生成新的地图点
            console.log(point);
            let point2 = new BMap.Point(104.072267, 30.663453);//中心点的坐标
            console.log(point1);

            map.clearOverlays();//清除地图上的所有覆盖物
            var iconImg = new BMap.Icon('../../images/map/icon-pin-solid-green-map.svg', new BMap.Size(32, 47), {    //设置坐标点的图片，偏移位置，大小
                anchor: new BMap.Size(16, 31),
                imageSize: new BMap.Size(34, 34)
            });
            marker1 = new BMap.Marker(point1, { icon: iconImg }); //按照地图点坐标生成标记
            var opts = {
                offset: new BMap.Size(8, 2) // 设置文本偏移量
            }
            marker1.enableMassClear();
            //设置地图上的文本标注
            var numLabel1 = new BMap.Label("终", opts);
            numLabel1.setStyle({     //设置文本标注的样式
                color: "white", //字体颜色
                fontSize: "16px",//字体大小 　　
                backgroundColor: "0.05", //文本标注背景颜色　
                border: "0",
                fontWeight: "bold" //字体加粗
            });
            marker1.setLabel(numLabel1);    //将文本标注添加到覆盖物中
            // var marker1 = new BMap.Marker(point1);//创建地图上的一个图像标注
            map.addOverlay(marker1);//将覆盖物添加到地图中
            // var marker2 = new BMap.Marker(point2);//创建地图上的一个图像标注

            var iconImg = new BMap.Icon('../../images/map/icon-pin-solid-green-map.svg', new BMap.Size(32, 47), {    //设置坐标点的图片，偏移位置，大小
                anchor: new BMap.Size(16, 31),
                imageSize: new BMap.Size(34, 34)
            });
            marker2 = new BMap.Marker(point2, { icon: iconImg }); //按照地图点坐标生成标记
            var opts = {
                offset: new BMap.Size(8, 2) // 设置文本偏移量
            }
            marker2.enableMassClear();
            //设置地图上的文本标注
            var numLabel2 = new BMap.Label("始", opts);
            numLabel2.setStyle({     //设置文本标注的样式
                color: "white", //字体颜色
                fontSize: "16px",//字体大小 　　
                backgroundColor: "0.05", //文本标注背景颜色　
                border: "0",
                fontWeight: "bold" //字体加粗
            });
            marker2.setLabel(numLabel2);    //将文本标注添加到覆盖物中
            map.addOverlay(marker2);//将覆盖物添加到地图中
            var walking = new BMap.WalkingRoute(map);//创建一个用于步行规划的实例
            walking.search(point1,point2);//创建步行搜索
            //添加回调方法，绘制路线
            walking.setSearchCompleteCallback(function(){ //设置检索后的回调函数
                var pts = walking.getResults().getPlan(0).getRoute(0).getPath();
                //getResults() 返回最近一次检索的结果
                //getPlan(0) 返回索引指定的方案,索引0表示第一条方案
                //getRoute(0) 返回方案中索引指定的线路。索引0表示第一条线路
                //getPath() Route中的返回路线的地理坐标点数组
                var polyline = new BMap.Polyline(pts,{strokeColor:"green", strokeWeight:5, strokeOpacity:0.5,strokeStyle:"dashed"});
                map.addOverlay(polyline);
            })
            var pointArray =new Array(point1,point2);
            map.setViewport(pointArray);    //调整最佳视野
            console.log(pointArray);
        })
        $(".amap-zoom-touch-plus").on("click",function(){     //放大地图
            map.zoomIn();
        })
        $(".amap-zoom-touch-minus").on("click",function(){     //缩小地图
            map.zoomOut();
        })
        $(".screen-content").on("click",".option",function(){
            $(this).find(".option-img").toggle(0);
            $(".eliminate").show(0);
        })
        $(".eliminate").on("click",function(){
            $(".option-img").hide(0);
        })
        $(".screen-confirm").on("click",function(){
            console.log($(".option-img"))
            for(let i=0;i<$(".option-img").length;i++){
                if($($(".option-img")[i]).css("display")=='inline'){
                  let keyStr =  $($(".option-img")[i]).prev().text();
                  console.log(keyStr);
                }
                
            }
        })



    })
})(jQuery);

html页面源码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ORjzGWwPCNqA4NzwgEleIZOIjmSOuTxb">
    </script>
    <script src="../../plugins/jquery-3.3.1.js"></script>
    <link rel="stylesheet/less" type="text/css" href="../../less/base/base.less">
    <link rel="stylesheet" href="../../plugins/bootstrap.css">
    <link rel="stylesheet" href="../../iconfont/iconfont.css">
    <link rel="stylesheet" href="../../less/map/map.css">
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <div class="app container-fluid">
        <nav class="star-nav row ">
            <ul class="hidden-xs">
                <li><a href="../../index.html"><img src="../../images/logo/img.png" alt="LOGO"> </a></li>
                <li><a href="">门店</a></li>
                <li><a href="../../html/account/login.html">我的账户</a></li>
                <li><a href="../../html/menu/menu.html">菜单</a></li>
                <li><a class="iconfont icon-home_shousuo_h_icon pop-up-btn"></a></li>
            </ul>
            <div class="row address" style="display:none">
                <div class="navbar col-sm-12 col-xs-12">
                    <div class="bavbar-input row">
                        <div class="field search col-sm-8 col-sm-offset-1 col-xs-8 col-xs-offset-1">
                            <input type="text" placeholder="输入地址查找门店" value="">
                            <img src="../../images/map/icon-search.svg" class="field-search">
                        </div>
                        <a class="filters col-sm-3 col-xs-3">
                            <span>筛选</span>
                        </a>
                    </div>

                </div>
            </div>

            <div id="map" class=" visible-xs" style="height:300px;">
                <iframe src="./map-sub.html" frameborder="0" height="300px" width="100%"></iframe>
            </div>
            <dl class="list shop-list">
                <!-- <dt>
                    <img src="../../images/map/icon-info-green.svg" class="first-top">
                    雅安万达广场店
                    <small>
                        雅安市 雅安市雨城区熊猫大道66号万达广场
                    </small>
                    <span class="distance">112.7 Km</span>
                    <div class="number">
                        <span>1</span>
                        <img src="../../images/map/icon-pin-solid-green.svg" alt="">
                    </div>
                </dt> -->
            </dl>
            <!-- 店铺的详情信息 -->
            <div class="details" style="display:none;">
                <header class="header">
                    <img src="../../images/map/icon-close.svg">
                </header>
                <section class="body">
                    <div class="store-details">
                        <h2>成都益州国际广场店</h2>
                        <div class="adr"><span class="locality">天府新区 888号 益州大道南段 </span>
                            <span class="postal-code">成都市 610000</span>
                        </div>
                        <a class="phone">
                            <img src="../../images/map/icon-contact.svg">
                            <span class="phone-tel">028-62632718</span>

                        </a>
                        <a id="store-directions-1017953" class="directions">
                            <img src="../../images/map/icon-directions.svg"><span class="route">获取路线</span></a>
                        <span class="route-point" style="display:none"></span>
                    </div>
                    <h3 class="caption"><span>营业时间</span></h3>
                    <div class="hours clearfix">
                        <div class="clearfix" span class="day">星期一</span>
                            <span class="hours">07:00上午至22:00下午</span>
                        </div>
                        <div class="clearfix" span class="day">星期二</span>
                            <span class="hours">07:30上午至22:00下午</span>
                        </div>
                        <div class="clearfix"><span class="day">星期三</span>
                            <span class="hours">06:30上午至22:00下午</span>
                        </div>
                        <div class="clearfix"><span class="day">星期四</span>
                            <span class="hours">08:30上午至23:00下午</span>
                        </div>
                        <div class="clearfix"><span class="day">星期五</span>
                            <span class="hours">07:30上午至21:00下午</span>
                        </div>
                        <div class="clearfix"><span class="day">星期六</span>
                            <span class="hours">07:30上午至22:00下午</span>
                        </div>
                        <div class="clearfix"><span class="day">星期天</span>
                            <span class="hours">06:30上午至23:00下午</span>
                        </div>
                    </div>
                    <h3 class="caption"><span>门店特色</span></h3>
                    <div class="amenities">
                        <div><img src="../../images/map/牛奶.svg"><span>专星送™</span></div>
                        <div><img src="../../images/map/汉堡.svg"><span>Origami™便携式滴滤咖啡</span></div>
                    </div>
                </section>
            </div>
        </nav>
        <!--左边弹窗--->
        <div class="pop-up hidden-xs">
            <div class="star-nav row">
                <div class="row pop-up-header">
                    <span class="pop-up-btn2">&times</span>
                    <img src="../../images/logo/img.png" alt="LOGO" class="img-logo">
                    <div class="col-md-9 col-md-push-2 col-box">
                        <div class="col-md-12">
                            <a href="../../html/map/map.html">门店</a>
                        </div>
                        <div class="col-md-12">
                            <a href="../../html/account/login.html">我的账户</a>
                        </div>
                        <div class="col-md-12 caidan">
                            <a href="../../html/menu/menu.html">菜单</a>
                        </div>
                        <div class="col-md-12">
                            <a href="">咖啡一号店臻选</a>
                        </div>
                        <div class="col-md-12">
                            <a href="../../html/account/login.html" class="denglu">登录</a>
                            <a href="../../html/account/register.html" class="zhuce">注册</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <main class="star-content row hidden-xs">
            <div class="map">
                <!-- 加载地图的div -->
                <div id="l-map" class="col-sm-12  col-xs-12 col-md-12 computer-side-map">
                </div>
                <!-- 加载地图中的自定义的插件 -->
                <div class="Plug-in">
                    <div class="amap-touch-toolbar">
                        <div class="amap-zoom-touch-plus">+</div>
                        <div class="amap-zoom-touch-minus">−</div>
                    </div>
                    <div class="MapTooltip">
                        <span>放大缩小地图来查看更多门店</span>
                        <div class="MapTooltip-horn"></div>
                    </div>
                </div>
            </div>

        </main>
    </div>
    <script src="../../plugins/less.js"></script>
    <script src="../../plugins/bootstrap.js"></script>
    <script src="../../js/map-js/map.js"></script>
    <script src="../../js/base-js/base.js"></script>
</body>

</html>