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

先上效果图

之后上源码，由于是第一次用地图的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./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="/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script><script src="/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>