百度地图绘制多段 驾车路线
直接上代码：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>百度地图绘制驾车途经点路线图</title> <script type="text/javascript"src="http://api./api?v=2.0&ak=3c3eb86a72b9af267d7432a4159768dd"></script><scriptsrc="/jquery-1.12.4.js"integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="crossorigin="anonymous"></script></head> <body> <div id=""><p>坐标点：<input type='text' id="pointStr" placeholder="坐标点(开始/途经点/终点) 坐标点之间用竖杠分割(如:109.27729623,35.0843510|109.276876,35.0804703)" style="width: 81.25rem;height: 2.5rem;" /></p></div><p><input type='button' value='开始画线' onclick='run();' /></p> <div style="width:1400px;height:600px;border:1px solid gray" id="container"></div> <script type="text/javascript"> var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(113.288386,23.139859),20); map.enableScrollWheelZoom(true); // 滚轮缩放map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用map.addControl(new BMap.NavigationControl({type : BMAP_NAVIGATION_CONTROL_ZOOM, //缩放控件类型 仅包含缩放按钮anchor : BMAP_ANCHOR_TOP_LEFT, //左上角offset : new BMap.Size(1,1) //进一步控制缩放按钮的水平竖直偏移量}));map.addControl(new BMap.NavigationControl());// 添加平移缩放控件 map.addControl(new BMap.ScaleControl());// 添加比例尺控件 map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件 // var myP1 = new BMap.Point(109.27729623387252,35.08435108922867); // var myP2 = new BMap.Point(109.27687667087184,35.08047031893331); // var myP3 = new BMap.Point(109.16293867684635,34.8374516358238);// var myP4 = new BMap.Point(109.08492109954132,34.824928484264824);// var myP5 = new BMap.Point(113.301513,23.129129);window.run = function (){var mapPoint=[];var pointStr=$("#pointStr").val();if(pointStr!=""&&pointStr!="undefind"){var point=pointStr.split("|")point.forEach((point)=>{varco=point.split(",")var myP1 = new BMap.Point(parseFloat(co[0]),parseFloat(co[1]));mapPoint.push(myP1);})}map.clearOverlays(); var newArray=group(mapPoint)// alert(JSON.stringify(newArray))newArray.forEach((newPoint,index)=>{var driving = new BMap.DrivingRoute(map); //创建驾车实例// driving.search(myP1, myP4); //第一个驾车搜索 driving.search(newPoint[0], newPoint[newPoint.length-1]); driving.setSearchCompleteCallback(function(){var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); //通过驾车实例，获得一系列点的数组 var polyline = new BMap.Polyline(pts); map.addOverlay(polyline); newPoint.forEach((point,index)=>{var m = new BMap.Marker(point); map.addOverlay(m); var lab= new BMap.Label("目标点",{position:point});map.addOverlay(lab); })// var m1 = new BMap.Marker(myP1); //创建3个marker // var m2 = new BMap.Marker(myP2); // var m3 = new BMap.Marker(myP3); // var m4 = new BMap.Marker(myP4); // // var m5 = new BMap.Marker(myP5); // map.addOverlay(m1); // map.addOverlay(m2); // map.addOverlay(m3);// map.addOverlay(m4);// // map.addOverlay(m5);// var lab1 = new BMap.Label("起点",{position:myP1}); //创建3个label // var lab2 = new BMap.Label("途径点1",{position:myP2}); // var lab3 = new BMap.Label("途径点2",{position:myP3}); // var lab4 = new BMap.Label("终点",{position:myP4}); // // var lab5 = new BMap.Label("终点",{position:myP5}); // map.addOverlay(lab1); // map.addOverlay(lab2); // map.addOverlay(lab3);// map.addOverlay(lab4); // // map.addOverlay(lab5); setTimeout(function(){map.setViewport(newPoint);//调整到最佳视野 // map.setViewport([myP1,myP2,myP3,myP4]);//调整到最佳视野 },1000); }); })//清除地图上所有的覆盖物 } function group(array) {let index = 0;let newArray = [];while(index < array.length) {newArray.push(array.slice(index, index+2));index++ }return newArray;}</script> </body> </html>
