百度地图绘制多段 驾车路线
百度地图绘制多段 驾车路线
直接上代码：
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>百度地图绘制驾车途经点路线图</title><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=3c3eb86a72b9af267d7432a4159768dd"></script><script src="https://code.jquery.com/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)=>{ var co=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>
末蓝、
亦凉
还没有评论，来说两句吧...