百度地图绘制多段驾车路线

直接上代码：

<!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><scriptsrc="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>

百度地图绘制多段驾车路线相关推荐

百度地图API，改变驾车路线颜色（仿淘宝快递查询，一条路线两个颜色）
想仿淘宝做一个物流查询,分为:寄件点.当前点. 收件点和路线图. 快递已走的路径(寄件点到当前点的颜色)和未走的路径(当前点到收件点)用颜色进行区分. 利用百度地图提供的API(当时遇到了点问 ...
vue百度地图绘制行进路线/路书/路线规划/线路展示
实现效果申请KEY/安装插件点击这个链接注册账号https://lbsyun.baidu.com/https://lbsyun.baidu.com/ 然后按图操作安装插件操作都在这个链接htt ...
百度地图绘制途径点/分段绘制路线
百度地图绘制途径点百度地图Api地址: https://lbsyun.baidu.com/ 公司项目中要求绘制物流信息,需体现途径点但是我在其中没有找到有关绘制路线,设定途径点的相关说明有一个非 ...
百度地图绘制实时路线以及最短线路规划
如何使用百度地图绘制实时路线以及最短线路规划最近在做百度地图的实时路线绘制,发现一些问题,比如由于定位漂移带来的路线绘制偏差,还有由于定位漂移,导致人未走动时,也会绘制路线等.百度鹰眼的线路纠偏个人 ...
android+动态地图+效果图,Android百度地图绘制圆形，圆形半径可动态变化
问题:百度地图绘制圆形,圆形半径可随进度拖动条发生改变思路:圆形本身是一个覆盖物,可参考百度地图Demo中的OverlayDemo.java这个类进行实现.完成画圆之后,圆形半径如何随着进度条的拖动 ...
百度地图-绘制工具以及覆盖物的简单使用
这几天重拾了地图相关的功能,做一个小小的总结. 本文的示例的后端为flask框架,前端使用了bootstrap和jQuery以及百度地图API. 接下来是展示部分. 地图上的覆盖物表示高校所处的位置, ...
vue结合百度地图绘制工具遇到的问题及解决方案(多边形编辑状态下形状显示不全、marker点添加事件无效)
vue如何引入百度地图绘制工具百度地图绘制工具示例 http://developer.baidu.com/map/jsdemo.htm#f0_7 百度地图绘制工具api文档 http://api.m ...
使用百度地图绘制点、线、面 | Javascript
写在前面: 本文为百度地图开发系列文章之一, 前期回顾: webGIS,基于百度地图的HelloWord实现如何使用前端css代码去掉百度地图左下角的图标使用百度地图绘制点.线.面 | Javas ...
Python调用百度地图绘制热力图密钥问题
首先奉上效果图: 问题描述: 因工作需求,必须用百度地图绘制热力图:发现因关于百度地图密钥的使用问题如下: 1.抓取经纬度信息状态码200: {"status":200," ...

百度地图绘制多段驾车路线

百度地图绘制多段驾车路线

百度地图绘制多段驾车路线相关推荐

最新文章

热门文章

百度地图绘制多段 驾车路线

百度地图绘制多段 驾车路线

百度地图绘制多段 驾车路线相关推荐

最新文章

热门文章

百度地图绘制多段驾车路线

百度地图绘制多段驾车路线

百度地图绘制多段驾车路线相关推荐