【百度地图系列】规划驾车路线和途径点及判断车辆路线偏移
2024-05-13 13:16:50
star: 项目需求需要利用百度地图构建路线并支持设置途径点，以及可以实时监控车辆是否偏移路线；两种方案。
写了比较完整的注释了，替换ak可直接看效果，规划驾车路线和途径点及判断车辆路线偏移 源码：
方法一：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><style type="text/css">body,html,#allmap {width: 100%;height: 100%;overflow: hidden;margin: 0;font-family: "微软雅黑";}</style><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的百度AK"></script><title>规划驾车路线和途径点及判断车辆位置偏移</title></head><body><div id="allmap"></div></body>
</html>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<!-- 判断点在线范围内 -->
<script type="text/javascript" src="../js/GeoUtils.js"></script>
<script type="text/javascript">// 百度地图API功能var map = new BMap.Map("allmap");map.centerAndZoom(new BMap.Point(116.404, 39.915), 13);map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件map.addControl(new BMap.ScaleControl()); // 添加比例尺控件map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件map.enableScrollWheelZoom(true);//起点-终点var startSpot = new BMap.Point(116.434913, 39.851941);var endSpot = new BMap.Point(116.528038, 39.789194);//途径点var waypointsList = new Array();waypointsList.push(new BMap.Point(116.456172, 39.833542));
// waypointsList.push(new BMap.Point(116.501384, 39.832991));
// waypointsList.push(new BMap.Point(116.53353, 39.802379));// 车辆动态坐标点var dynamicZb = new BMap.Point(116.382997,39.791302);//清除地图上所有的覆盖物// map.clearOverlays();//创建驾车实例var driving = new BMap.DrivingRoute(map);// 判断有无途径点if (waypointsList.length > 0) {//第一个驾车搜索(开始路段)driving.search(startSpot, waypointsList[0]);// 途径点路段for (var i = 0; i < waypointsList.length - 1; i++) {driving.search(waypointsList[i], waypointsList[i + 1]);}//第二个驾车搜索(终止路段)driving.search(waypointsList[waypointsList.length - 1], endSpot);} else {driving.search(startSpot, endSpot);}//通过驾车实例，获得一系列点的数组var zbList = new Array();// 多路段坐标临时变量var zbLinshi;/*** 路段数统计(与途径点(数组长度+1) 拿到完整坐标点数)* 如：1,2,3,4 起点终点：1/4 途径点：2/3 需绘画3次路段*/var routeCount = 0;driving.setSearchCompleteCallback(function() {routeCount++;console.log("路段数：" + routeCount);var pts = driving.getResults().getPlan(0).getRoute(0).getPath();//通过驾车实例，获得一系列点的数组 var polyline = new BMap.Polyline(pts);zbLinshi = polyline.getPath();console.log("多路段坐标点数：" + zbLinshi.length);// 将多个路段坐标点放入集合for (var i = 0; i < zbLinshi.length; i++) {
// zbList.push("new BMap.Point("+zbLinshi[i].lng);
// zbList.push(zbLinshi[i].lat+")");zbList.push(zbLinshi[i]);// console.log(zbLinshi[i]);}map.addOverlay(polyline);//创建marker var m1 = new BMap.Marker(startSpot);var m2 = new BMap.Marker(endSpot);map.addOverlay(m1);map.addOverlay(m2);if (waypointsList.length > 0) {for (var i = 0; i < waypointsList.length; i++) {map.addOverlay(new BMap.Marker(waypointsList[i]));}}//创建个label var lab1 = new BMap.Label("起点", {position: startSpot});var lab2 = new BMap.Label("终点", {position: endSpot});map.addOverlay(lab1);map.addOverlay(lab2);if (waypointsList.length > 0) {for (var i = 0; i < waypointsList.length; i++) {map.addOverlay(new BMap.Label("途径点" + (i + 1), {position: waypointsList[i]}));}}// setTimeout(function() {var viewPorts = new Array();viewPorts.push(startSpot);if (waypointsList.length > 0) {for (var i = 0; i < waypointsList.length; i++) {viewPorts.push(waypointsList[i]);}}viewPorts.push(endSpot);map.setViewport(viewPorts);//调整到最佳视野 // }, 1000);});/* 实时监测返回状态BMAP_STATUS_SUCCESS 检索成功。对应数值“0”BMAP_STATUS_CITY_LIST 城市列表。对应数值“1”BMAP_STATUS_UNKNOWN_LOCATION 位置结果未知。对应数值“2”BMAP_STATUS_UNKNOWN_ROUTE 导航结果未知。对应数值“3”BMAP_STATUS_INVALID_KEY 非法密钥。对应数值“4”BMAP_STATUS_INVALID_REQUEST 非法请求。对应数值“5”BMAP_STATUS_PERMISSION_DENIED 没有权限。对应数值“6”BMAP_STATUS_SERVICE_UNAVAILABLE 服务不可用。对应数值“7”BMAP_STATUS_TIMEOUT 超时。对应数值“8” */var checkgetStatus = setInterval(function() {if (driving.getStatus() == 0 && waypointsList.length + 1 == routeCount) {// 返回成功终止检测clearInterval(checkgetStatus);console.log("---保存坐标数组----：" + zbList);//判断路线偏移CheckRouteDeviation(dynamicZb, zbList, 200);}}, 1000);/*(判断路线偏移)点是否在线上(通过以每个坐标点为圆心,自定以半径范围；检测某个坐标点是否在圆中)dynamicZb：要判断的坐标；zbList：线路坐标数组；radius：半径范围*/function CheckRouteDeviation(dynamicZb, zbList, radius) {var circles = [];//遍历坐标集合，以每一个坐标点为圆心，创建圆for (var i = 0; i < zbList.length; i++) {var c = zbList[i]; //圆心 //测试圆 radius代表圆的半径距离 单位：米var circle = new BMap.Circle(c, radius);circles.push(circle);// 绘画圆map.addOverlay(circle);}// console.log("测试圆：" + circles);//循环遍历判断车辆当前坐标点是否在圆里var flag = false;for (var i = 0; i < circles.length; i++) {//point:当前坐标点、circles[i]:规划好的圆var result = BMapLib.GeoUtils.isPointInCircle(dynamicZb, circles[i]);if (result == true) { //true：点是在圆圈里flag = true;break;}}console.log("点是否在线路上(是否在线路坐标点圆中)：" + flag);}$(function() {// ptInCircle();})// ----------------------------------------- 未用 ----------------------------//点在圆内function ptInCircle() {var pt = new BMap.Point(116.404, 39.915); //测试点var c = new BMap.Point(116.404, 39.915); //圆心 var circle = new BMap.Circle(c, 500); //测试圆var result = BMapLib.GeoUtils.isPointInCircle(pt, circle);if (result == true) {// alert("点在圆形内");} else {// alert("点在圆形外")}//演示：将点与圆形添加到地图上// map.clearOverlays();// var mkr = new BMap.Marker(pt);// map.addOverlay(mkr);map.addOverlay(circle);}//点在圆外function ptOutCircle() {var pt = new BMap.Point(116.396, 39.915); //测试点var c = new BMap.Point(116.404, 39.915); //圆心 var circle = new BMap.Circle(c, 500); //测试圆 var result = BMapLib.GeoUtils.isPointInCircle(pt, circle);if (result == true) {alert("点在圆形内");} else {alert("点在圆形外")}//演示：将点与圆形添加到地图上map.clearOverlays();var mkr = new BMap.Marker(pt);map.addOverlay(mkr);map.addOverlay(circle);}
</script>
方法二：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><style type="text/css">body,html,#allmap {width: 100%;height: 100%;overflow: hidden;margin: 0;font-family: "微软雅黑";}</style><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的ak"></script><title>整合修改官方驾车路线途经点途径点demo</title></head><body><div id="allmap"></div></body>
</html>
<script type="text/javascript">// 百度地图API功能var map = new BMap.Map("allmap");map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);map.enableScrollWheelZoom(true);var p1 = new BMap.Point(116.301934, 39.977552);var p2 = new BMap.Point(116.508328, 39.919141);// 途径点var t1= new BMap.Point(116.365942, 39.996165);var t2 = new BMap.Point(116.408757, 39.995704);var waypointsList = [t1,t2];var driving = new BMap.DrivingRoute(map, {renderOptions: {map: map,autoViewport: true}});driving.search(p1, p2, {waypoints: waypointsList}); //waypoints表示途经点// 多路段坐标临时变量var zbList = [];driving.setSearchCompleteCallback(function() {// 取出每段路坐标点数组for (var i = 0; i <= waypointsList.length; i++) {var pts = driving.getResults().getPlan(0).getRoute(i).getPath();var zbLinshi = new BMap.Polyline(pts).getPath();console.log("多路段坐标点数：" + zbLinshi.length);// 多段路坐标点整合zbList = zbList.concat(zbLinshi);}console.log("多路段坐标点数：" + zbList.length);for (var i = 0; i < zbList.length; i++) {console.log(zbList[i].lng+","+zbList[i].lat);}});// 坐标点画圆展示var checkgetStatus = setInterval(function() {if (driving.getStatus() == 0) {// 返回成功终止检测clearInterval(checkgetStatus);// 画圆CheckRouteDeviation(0, zbList, 200);}}, 1000);// 画圆function CheckRouteDeviation(dynamicZb, zbList, radius) {var circles = [];//遍历坐标集合，以每一个坐标点为圆心，创建圆for (var i = 0; i < zbList.length; i++) {var c = zbList[i]; //圆心 //测试圆 radius代表圆的半径距离 单位：米var circle = new BMap.Circle(c, radius);circles.push(circle);// 绘画圆map.addOverlay(circle);}// console.log("测试圆：" + circles);// //循环遍历判断车辆当前坐标点是否在圆里// var flag = false;// for (var i = 0; i < circles.length; i++) {// //point:当前坐标点、circles[i]:规划好的圆// var result = BMapLib.GeoUtils.isPointInCircle(dynamicZb, circles[i]);// if (result == true) { //true：点是在圆圈里// flag = true;// break;// }// }// console.log("点是否在线路上(是否在线路坐标点圆中)：" + flag);}
</script>
通过线路所有坐标点规划路线(回显线路) 源码：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><style type="text/css">body,html {width: 100%;height: 100%;margin: 0;font-family: "微软雅黑";}#allmap {height: 500px;width: 100%;}</style><title>通过坐标点绘画线路</title></head><body><div id="allmap"></div></body>
</html>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的百度AK"></script>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">// 百度地图API功能var map = new BMap.Map("allmap");map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);map.enableScrollWheelZoom(true);//途径点var waypointsList = new Array();waypointsList.push(new BMap.Point(116.456172, 39.833542));waypointsList.push(new BMap.Point(116.501384, 39.832991));waypointsList.push(new BMap.Point(116.53353, 39.802379));$(function() {var zbList = [new BMap.Point(116.434896,39.851921),new BMap.Point(116.434825,39.851913),new BMap.Point(116.434654,39.851916),new BMap.Point(116.434172,39.851924),new BMap.Point(116.433598,39.851925),new BMap.Point(116.432602,39.851943),new BMap.Point(116.431988,39.851964),new BMap.Point(116.431737,39.851988),new BMap.Point(116.431486,39.852002),new BMap.Point(116.431264,39.852026),new BMap.Point(116.430902,39.852043),new BMap.Point(116.430399,39.852071),new BMap.Point(116.428398,39.852125),new BMap.Point(116.428177,39.852129),new BMap.Point(116.428177,39.852049),new BMap.Point(116.428176,39.852049),new BMap.Point(116.428165,39.851779),new BMap.Point(116.428165,39.851629),new BMap.Point(116.428165,39.851629),new BMap.Point(116.428155,39.851159),new BMap.Point(116.428113,39.849559),new BMap.Point(116.428102,39.848949),new BMap.Point(116.428092,39.848649),new BMap.Point(116.428082,39.848419),new BMap.Point(116.428061,39.847439),new BMap.Point(116.42803,39.84638),new BMap.Point(116.428029,39.846379),new BMap.Point(116.428019,39.845789),new BMap.Point(116.428019,39.845659),new BMap.Point(116.428019,39.845449),new BMap.Point(116.427987,39.843949),new BMap.Point(116.427997,39.843459),new BMap.Point(116.427997,39.843339),new BMap.Point(116.428007,39.843219),new BMap.Point(116.428027,39.843029),new BMap.Point(116.428077,39.842758),new BMap.Point(116.428097,39.842697),new BMap.Point(116.428267,39.842265),new BMap.Point(116.428267,39.842264),new BMap.Point(116.428286,39.842023),new BMap.Point(116.428437,39.841231),new BMap.Point(116.428437,39.841231),new BMap.Point(116.428456,39.84066),new BMap.Point(116.428416,39.840301),new BMap.Point(116.428365,39.839632),new BMap.Point(116.428345,39.839472),new BMap.Point(116.428314,39.839122),new BMap.Point(116.428324,39.838882),new BMap.Point(116.428334,39.838782),new BMap.Point(116.428404,39.838611),new BMap.Point(116.428615,39.838367),new BMap.Point(116.428977,39.838211),new BMap.Point(116.42947,39.838133),new BMap.Point(116.429762,39.838108),new BMap.Point(116.429902,39.838106),new BMap.Point(116.431864,39.838062),new BMap.Point(116.43287,39.838044),new BMap.Point(116.433001,39.838052),new BMap.Point(116.433514,39.838063),new BMap.Point(116.434037,39.838073),new BMap.Point(116.434359,39.838097),new BMap.Point(116.43443,39.838096),new BMap.Point(116.434742,39.83811),new BMap.Point(116.434822,39.838119),new BMap.Point(116.435175,39.838143),new BMap.Point(116.435607,39.838215),new BMap.Point(116.435607,39.838214),new BMap.Point(116.436432,39.838209),new BMap.Point(116.439642,39.838141),new BMap.Point(116.439783,39.838138),new BMap.Point(116.440095,39.838133),new BMap.Point(116.443797,39.838058),new BMap.Point(116.448301,39.837976),new BMap.Point(116.45005,39.837951),new BMap.Point(116.45005,39.837951),new BMap.Point(116.450462,39.837845),new BMap.Point(116.450954,39.837799),new BMap.Point(116.451908,39.837766),new BMap.Point(116.4524,39.8377),new BMap.Point(116.4524,39.8377),new BMap.Point(116.453414,39.837668),new BMap.Point(116.453997,39.837661),new BMap.Point(116.453997,39.837661),new BMap.Point(116.454067,39.837481),new BMap.Point(116.454167,39.837179),new BMap.Point(116.454607,39.835824),new BMap.Point(116.454868,39.835221),new BMap.Point(116.454918,39.835111),new BMap.Point(116.455058,39.834829),new BMap.Point(116.455218,39.834578),new BMap.Point(116.455449,39.834215),new BMap.Point(116.45583,39.833742),new BMap.Point(116.4561,39.833469),new BMap.Point(116.456101,39.833468),new BMap.Point(116.456311,39.833266),new BMap.Point(116.457073,39.832619),new BMap.Point(116.457815,39.832043),new BMap.Point(116.458276,39.831689),new BMap.Point(116.458336,39.831639),new BMap.Point(116.459718,39.830569),new BMap.Point(116.46088,39.829652),new BMap.Point(116.461,39.829561),new BMap.Point(116.461131,39.829451),new BMap.Point(116.461301,39.82931),new BMap.Point(116.461421,39.829209),new BMap.Point(116.465443,39.826117),new BMap.Point(116.465583,39.826007),new BMap.Point(116.468242,39.823937),new BMap.Point(116.471398,39.821506),new BMap.Point(116.471558,39.821387),new BMap.Point(116.473194,39.820116),new BMap.Point(116.473613,39.819789),new BMap.Point(116.474072,39.819432),new BMap.Point(116.474471,39.819105),new BMap.Point(116.47464,39.818936),new BMap.Point(116.475089,39.81849),new BMap.Point(116.475189,39.818371),new BMap.Point(116.475189,39.818369),new BMap.Point(116.475588,39.817932),new BMap.Point(116.475877,39.817605),new BMap.Point(116.475907,39.817585),new BMap.Point(116.476096,39.817377),new BMap.Point(116.476884,39.816494),new BMap.Point(116.477621,39.815681),new BMap.Point(116.477691,39.815572),new BMap.Point(116.47792,39.815325),new BMap.Point(116.478578,39.814632),new BMap.Point(116.478628,39.814572),new BMap.Point(116.478887,39.814265),new BMap.Point(116.478887,39.814264),new BMap.Point(116.479415,39.81368),new BMap.Point(116.480391,39.812692),new BMap.Point(116.480739,39.812376),new BMap.Point(116.481048,39.81213),new BMap.Point(116.482024,39.811363),new BMap.Point(116.482771,39.810763),new BMap.Point(116.48292,39.810655),new BMap.Point(116.483278,39.810371),new BMap.Point(116.484572,39.80932),new BMap.Point(116.485239,39.80871),new BMap.Point(116.485975,39.807881),new BMap.Point(116.486025,39.807812),new BMap.Point(116.486025,39.807811),new BMap.Point(116.486115,39.807653),new BMap.Point(116.486493,39.807089),new BMap.Point(116.486851,39.806485),new BMap.Point(116.486861,39.806465),new BMap.Point(116.486981,39.806317),new BMap.Point(116.48702,39.806258),new BMap.Point(116.48715,39.80605),new BMap.Point(116.48717,39.80602),new BMap.Point(116.487866,39.804902),new BMap.Point(116.488304,39.80419),new BMap.Point(116.488434,39.803972),new BMap.Point(116.488951,39.803121),new BMap.Point(116.489021,39.803012),new BMap.Point(116.489071,39.802943),new BMap.Point(116.489946,39.801489),new BMap.Point(116.490812,39.800064),new BMap.Point(116.490952,39.799877),new BMap.Point(116.490991,39.799817),new BMap.Point(116.491071,39.799709),new BMap.Point(116.492533,39.798065),new BMap.Point(116.493001,39.797484),new BMap.Point(116.493369,39.797021),new BMap.Point(116.493687,39.796697),new BMap.Point(116.493827,39.79659),new BMap.Point(116.495547,39.794672),new BMap.Point(116.495548,39.79467),new BMap.Point(116.496413,39.793686),new BMap.Point(116.49892,39.790853),new BMap.Point(116.499129,39.790647),new BMap.Point(116.499228,39.790559),new BMap.Point(116.499228,39.790559),new BMap.Point(116.499577,39.790195),new BMap.Point(116.501806,39.787686),new BMap.Point(116.502253,39.787184),new BMap.Point(116.502582,39.78682),new BMap.Point(116.50298,39.786477),new BMap.Point(116.503626,39.786069),new BMap.Point(116.504144,39.785838),new BMap.Point(116.505626,39.785423),new BMap.Point(116.505626,39.785422),new BMap.Point(116.505805,39.785385),new BMap.Point(116.505984,39.785338),new BMap.Point(116.505984,39.785338),new BMap.Point(116.506441,39.785225),new BMap.Point(116.5067,39.785159),new BMap.Point(116.507526,39.784953),new BMap.Point(116.508003,39.78483),new BMap.Point(116.511089,39.784034),new BMap.Point(116.511159,39.784015),new BMap.Point(116.511408,39.783959),new BMap.Point(116.514048,39.783281),new BMap.Point(116.514387,39.783194),new BMap.Point(116.518375,39.782161),new BMap.Point(116.518405,39.782162),new BMap.Point(116.518605,39.782113),new BMap.Point(116.518605,39.782112),new BMap.Point(116.518764,39.782064),new BMap.Point(116.520431,39.781634),new BMap.Point(116.52118,39.781409),new BMap.Point(116.521569,39.781261),new BMap.Point(116.523208,39.780527),new BMap.Point(116.523438,39.780408),new BMap.Point(116.523548,39.780358),new BMap.Point(116.523588,39.780438),new BMap.Point(116.523588,39.780438),new BMap.Point(116.523648,39.780588),new BMap.Point(116.523747,39.780828),new BMap.Point(116.523747,39.780828),new BMap.Point(116.524355,39.782329),new BMap.Point(116.524944,39.78376),new BMap.Point(116.524993,39.78389),new BMap.Point(116.525811,39.78589),new BMap.Point(116.526301,39.78643),new BMap.Point(116.52654,39.78668),new BMap.Point(116.52655,39.786729),new BMap.Point(116.52665,39.786809),new BMap.Point(116.52665,39.786809),new BMap.Point(116.52679,39.786849),new BMap.Point(116.52693,39.786989),new BMap.Point(116.52701,39.787069),new BMap.Point(116.52713,39.787189),new BMap.Point(116.52739,39.787359),new BMap.Point(116.52839,39.787847),new BMap.Point(116.52867,39.787987),new BMap.Point(116.52901,39.788146),new BMap.Point(116.52921,39.788245),new BMap.Point(116.52905,39.788545),new BMap.Point(116.52905,39.788546),new BMap.Point(116.528679,39.789026),new BMap.Point(116.528539,39.789126),new BMap.Point(116.528529,39.789147),new BMap.Point(116.528329,39.789407)
];drawRoute(map, zbList);})//规划路线function drawRoute(map, zbList) {var arrPois = [];var lineColor = "";//循环遍历数组for (var i = 0; i < zbList.length - 1; i++) {//清空数组,如若不清空，会在原来基础上每次在重复的增加一边。这儿是让每两个点画线，否则第二次进来的时候就成四个数据了，第二个重复了一次arrPois.splice(0, arrPois.length);// arrPois.push(this.translateBD(zbList[i].Latitude, zbList[i].Longitude));// arrPois.push(this.translateBD(zbList[i + 1].Latitude, zbList[i + 1].Longitude));arrPois.push(new BMap.Point(zbList[i].lng, zbList[i].lat));arrPois.push(new BMap.Point(zbList[i + 1].lng, zbList[i + 1].lat));//区间颜色// if (zbList[i].Speed < 30) {// lineColor = "#fed769";// } else if (zbList[i].Speed > 30 && zbList[i].Speed < 60) {// lineColor = "#b0e758";// } else if (zbList[i].Speed > 60 && zbList[i].Speed < 90) {// lineColor = "#37d49a";// } else if (zbList[i].Speed > 90 && zbList[i].Speed < 120) {// lineColor = "#0c9be4";// } else if (zbList[i].Speed > 120) {// lineColor = "#960100";// }//创建线路window.polyline = new BMap.Polyline(arrPois, //所有的GPS坐标点{// strokeColor: lineColor, //线路颜色strokeColor: "#7F98C7", //线路颜色strokeWeight: 4, //线路大小5strokeOpacity: 1//线路类型(虚线)// strokeStyle: "dashed"});//绘制线路map.addOverlay(polyline);}//创建marker var m1 = new BMap.Marker(zbList[0]);var m2 = new BMap.Marker(zbList[zbList.length - 1]);map.addOverlay(m1);map.addOverlay(m2);//创建label var lab1 = new BMap.Label("起点", {position: zbList[0]});var lab2 = new BMap.Label("终点", {position: zbList[zbList.length - 1]});map.addOverlay(lab1);map.addOverlay(lab2);}
</script>
【百度地图系列】规划驾车路线和途径点及判断车辆路线偏移相关推荐
- 百度地图规划驾车线路DrivingRoute，自定义标注线路样式，禁止起始点途经点拖拽
使用百度地图驾车路线规划DrivingRoute方法,实现线路规划 产品需求:根据百度规划的线路信息返回后台存储,但百度推荐的线路除了起点.途经点.终点不可拖拽外,其他地方可以拖拽 实现思路:先将默认 ...
- vue高德单条(可批量)路线规划+单条(可批量)路线带途径节点marker+单条(可批量)路线分段渲染各颜色
一 功能介绍: vue高德单条(可批量)路线规划+单条(可批量)路线带途径节点marker+单条(可批量)路线分段渲染各颜色 效果图(单条路线规划分段渲染颜色): 二.实现 1.本项目使用的 高德ap ...
- 【高德地图API】从零开始学高德JS API（五）路线规划——驾车|公交|步行
先来看两个问题:路线规划与导航有什么区别?步行导航与驾车导航有什么区别? 回答: 1.路线规划,指的是为用户提供3条路线推荐.[高德]在提供路线规划的时候,会提供用户自定义路线规划功能,这是别家没有做 ...
- 调用百度api实现驾车路线和时间距离计算
毕设篇:调用百度api实现驾车路线和时间距离计算 效果展示 html页面: <!DOCTYPE html> <html lang="en"><head ...
- 百度地图API制作类似 百度地图的路线导航界面并实现简单的路线规划功能
之前我们讲了怎么在百度地图上设置Marker(如A点..) 和弹出框(跟随Marker的,Marker移动的时候也是会跟着移动的),接着又觉得百度地图自带的放大缩小不(fei)是(chang)很(de ...
- android高德地图api驾车路线规划,驾车路径规划-调起高德地图-示例中心-JS API 示例 | 高德地图API...
html,body,#container{ height:100%; } .btn{ position: fixed; bottom: 20px; right: 20px; background-co ...
- 百度地图 - 绘制驾车路线图
简介 在地图的开发中,最常出现的需求就是驾车线路规划.没开发过的人都会认为比较复杂,当把文档看了一遍之后你就会发现百度api比我们想象中还要强大.下面就开始介绍如何通过百度api轻松的实现这个功能. ...
- 【百度地图API】北京周边7日游——图标按路线轨迹行动
原文:[百度地图API]北京周边7日游--图标按路线轨迹行动 任务描述: 春节就要来啦~酸奶小妹的妈妈要从遥远的重庆,来到北京过春节呢!酸奶小妹忙着给妈妈计划,北京周边的旅游线路.计划好路线后,就开始 ...
- 百度地图系列02——地图移动到指定点
百度地图系列02--地图移动到指定点 关于加载地图,可参考前面一章http://blog.csdn.net/u013293125/article/details/49951257,基本代码没变 本章的 ...
最新文章
- python用户名和密码登录函数_基于Python构建用户ID和密码存储查询系统,python,建立,一个,用户名,UserID,Password,的...
- TSP问题中：如果有n个顶点，那么一共有多少种不同的环游
- margin负值布局（一）
- activiti 多租户_Activiti中具有独立数据库架构的多租户
- 【渝粤教育】国家开放大学2018年春季 0269-21T文学概论 参考试题
- JavaScript面向对象的理解
- html加粗字体打印失效_论文格式要求及字体大小
- cemtos7.2搭建samba
- jdk优先级队列是如何实现的
- python鼠标自动点击脚本_用Python实现鼠标自动点击
- tftpd-hpa使用完全教程
- sklearn 手写体识别
- 用JAVA 创建自己的 A4 打印语言
- 电脑版微信提示音mp3_短的微信提示音什么好？40首好听的微信提示音试听下载...
- iphone中按Home键退出程序
- java计算机毕业设计干洗店订单管理系统设计与实现源码+mysql数据库+系统+lw文档+部署
- checkra1n越狱错误79_苹果越狱工具 checkra1n 更新：支持 iOS 13.4.1
- iOS动画——文字晃动
- 电脑开机黑屏，只有鼠标能动
- 从源码看 Activity 生命周期（上篇）