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

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>



  • 2018-11-18 09:06:06

    Android子线程中更新UI的3种方法

    UI的更新必须在主线程中完成,所以不管上述那种方法,都是将更新UI的消息发送到了主线程的消息对象,让主线程做处理。

  • 2018-11-19 15:10:23

    nodemailer的使用,nodejs发送邮件

    前段时间有个很普通的项目需要发邮件的功能,而且是刚开始学nodejs,所以只是搜索了下用什么好的库能实现,就找到了nodemailer了。这篇文章主要是记录一下使用的过程和经验。

  • 2018-11-21 09:07:37

    Android为每个应用分配多少内存?

    熟悉Android内存分配机制的朋友都知道,Android为每个进程分配内存时,采用弹性的分配方式,即刚开始并不会给应用分配很多的内存,而是给每一个进程分配一个“够用”的内存大小。

  • 2018-11-22 21:13:28

    webview之独立进程

    app内存占用大,被系统回收的概率就高,当每次把app切到后台再回到app时,可能每次app都会重启,最常见的是activity或fragment被回收了,导致fragment使用activity的数据时,出现NullPointerException。内存占用大,app越不稳定。运行性能差。webview加载页面后会占用更多的内存,从而导致app内存占用大,最终导致出现以上问题。

  • 2018-11-22 21:14:34

    为什么要采用WebView独立进程

    App中大量Web页面的使用容易导致App内存占用巨大,存在内存泄露,崩溃率高等问题,WebView独立进程的使用是解决Android WebView相关问题的一个合理的方案。

  • 2018-11-22 21:15:45

    Android WebView: 性能优化不得不说的事

    Mo说:大家通过前两篇文章想必都能顺利的 get 到 WebView 与 JavaScript 交互的技能了。现在 App 嵌入 H5 页面已经是稀松平常的事情了,开发者要面对 WebView 也越来越多的爆发出来,比如页面加载慢,内存泄露,不同 Android 系统版本采用了不同内核的兼容问题等等。 所以当我们使用了 WebView 这个组件的时候,性能优化的事情就不能不提上议程了。这篇文章我们就针对上述问题来总结下 Android WebView 性能优化的常见方法。 作者:MoTalksCn_林墨 链接:https://www.jianshu.com/p/95d4d73be3d1 來源:简书 简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

  • 2018-11-22 21:20:04

    WebView内存泄漏--解决方法小结

    Android混合开发时经常用到WebView加载html等页面,而WebView的内存泄漏就是最经常遇到的问题,尤其是当项目中需要用webview加载的页面比较多时。 即使当我退出页面时在我的BrowserActivity的onDestroy()方法中进行内存占用回收(如下图)但并没有效果:

  • 2018-11-23 09:19:27

    论索引的重要性

    我还有什么能说的呢,看来索引基本能解决一切慢sql。好开心。