规划驾车路线和途径点及判断车辆路线偏移

2020-02-24 18:48:34

参考地址 规划驾车路线和途径点及判断车辆路线偏移

仅供参考,我还是推荐用矩形判断,嘿嘿。

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, //线路大小5

strokeOpacity: 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>



  • 2019-02-15 10:35:31

    使用ffmpeg转码m3u8并播放

    m3u8是苹果公司开发的一项新型播放格式,这种播放格式支持目前市面的windows、androis、ios设备主流的浏览器,同样的视频文件既可以在flash环境播放,又能在无flash的html5环境播放,它的优势还不止于此,它可以实现多种码率在不同网速下的自动切换,网速好自动切换高清晰度视频,网速慢自动播放低清晰度文件,还可以实现流加密(视频文件本身加密)、分段下载播放、任意时间点拖拽播放、随机视频文件广告插入等等优势,所以公司打算是用m3u8格式作为视频格式。 --------------------- 作者:悠闲咖啡007 来源:CSDN 原文:https://blog.csdn.net/psh18513234633/article/details/79312607 版权声明:本文为博主原创文章,转载请附上博文链接!

  • 2019-02-15 10:36:45

    将MP4转成m3u8

    网上很多垃圾文章推荐segmenter工具,但用的时候,3.5G的ts文件丢了一半的数据,于是想到了ffmpeg转。

  • 2019-02-19 10:01:55

    node下使用open模块在指定浏览器下打开url

    最近在做一个项目的过程中,得到一个远程二维码图片的url,需要扫码登录,每次都是在控制台发url打印出来,再复制粘贴到浏览器的地址栏中打开扫码,整个过程过于繁琐,于是想找一个模块,直接在node下,指定浏览器打开该图片。这样可以省不少事。

  • 2019-02-24 09:47:09

    解决Node.js的命令行输出中文乱码问题(也适用于Electron)

    ​一般我们的js文件都是试用utf8编码保存的,但是中文windows的命令行一般默认使用cp936编码(就是gbk),这样我们用js代码 console.log('中文');输出日志的时候,会发现输出的是乱码。 网上有提供一些解决方案,典型的就是用iconv或iconv-lite,把这些中文字符串先转成gbk再输出。 但是这个方案我试了多次,在win10的命令行下,utf8的字符串是成功转成了gbk字符串了(通过打印Buffer可以见到),但是输出还是乱码。