JS实现百度地图同时显示多个路书效果
来源:爱站网时间:2020-08-31编辑:网友分享
地图是现代社会许多企业广泛使用的工具之一,它不仅可以提供各种路线规划的功能,还可以提供许多道路的辅助信息,从而规划出最佳的路线供用户选择,那么就让我们一起来了解一下JS实现百度地图同时显示多个路书效果吧!
地图是现代社会许多企业广泛使用的工具之一,它不仅可以提供各种路线规划的功能,还可以提供许多道路的辅助信息,从而规划出最佳的路线供用户选择,那么就让我们一起来了解一下JS实现百度地图同时显示多个路书效果吧!
启动路书:
var BMapLib = window.BMapLib = BMapLib || {};
(function() {
var b, a = b = a || {
version : "1.5.0"
};
a.guid = "$BAIDU$";
(function() {
window[a.guid] = window[a.guid] || {};
a.dom = a.dom || {};
a.dom.g = function(e) {
if ("string" == typeof e || e instanceof String) {
return document.getElementById(e)
} else {
if (e && e.nodeName && (e.nodeType == 1 || e.nodeType == 9)) {
return e
}
}
return null
};
a.g = a.G = a.dom.g;
a.lang = a.lang || {};
a.lang.isString = function(e) {
return "[object String]" == Object.prototype.toString.call(e)
};
a.isString = a.lang.isString;
a.dom._g = function(e) {
if (a.lang.isString(e)) {
return document.getElementById(e)
}
return e
};
a._g = a.dom._g;
a.dom.getDocument = function(e) {
e = a.dom.g(e);
return e.nodeType == 9 ? e : e.ownerDocument || e.document
};
a.browser = a.browser || {};
a.browser.ie = a.ie = /msie (\d+\.\d+)/i.test(navigator.userAgent) ? (document.documentMode || +RegExp["\x241"])
: undefined;
a.dom.getComputedStyle = function(f, e) {
f = a.dom._g(f);
var h = a.dom.getDocument(f), g;
if (h.defaultView && h.defaultView.getComputedStyle) {
g = h.defaultView.getComputedStyle(f, null);
if (g) {
return g[e] || g.getPropertyValue(e)
}
}
return ""
};
a.dom._styleFixer = a.dom._styleFixer || {};
a.dom._styleFilter = a.dom._styleFilter || [];
a.dom._styleFilter.filter = function(f, j, k) {
for (var e = 0, h = a.dom._styleFilter, g; g = h[e]; e++) {
if (g = g[k]) {
j = g(f, j)
}
}
return j
};
a.string = a.string || {};
a.string.toCamelCase = function(e) {
if (e.indexOf("-") = g) {
clearInterval(i._intervalFlag);
if (i.i > i._path.length) {
return
}
i._moveNext(++i.i)
} else {
h++;
var o = m(l.x, k.x, h, g), r = m(
l.y, k.y, h, g), q = i._projection
.pointToLngLat(new BMap.Pixel(
o, r));
if (h == 1) {
var p = null;
if (i.i - 1 >= 0) {
p = i._path[i.i - 1]
}
if (i._opts.enableRotation == true) {
i.setRotation(p, n, j)
}
if (i._opts.autoView) {
if (!i._map.getBounds()
.containsPoint(q)) {
i._map.setCenter(q)
}
}
}
i._marker.setPosition(q);
i._setInfoWin(q)
}
}, e)
},
setRotation : function(l, f, m) {
var j = this;
var e = 0;
f = j._map.pointToPixel(f);
m = j._map.pointToPixel(m);
if (m.x != f.x) {
var k = (m.y - f.y) / (m.x - f.x), g = Math
.atan(k);
e = g * 360 / (2 * Math.PI);
if (m.x 0) {
i = -1
} else {
i = 1
}
j._marker.setRotation(-i * 90)
}
return
},
linePixellength : function(f, e) {
return Math.sqrt(Math.abs(f.x - e.x)
* Math.abs(f.x - e.x) + Math.abs(f.y - e.y)
* Math.abs(f.y - e.y))
},
pointToPoint : function(f, e) {
return Math.abs(f.x - e.x) * Math.abs(f.x - e.x)
+ Math.abs(f.y - e.y) * Math.abs(f.y - e.y)
},
_moveNext : function(e) {
var f = this;
if (e
function showallrecord(starttime,endtime){//显示多条开始结束时间之间的自行车路书
var bikeId=null;
$.getJSON("./GetBickIdServlet",function(json){
bikeId = json;//所有自行车编号
});
var json={
"StartTime":starttime,//开始时间
"EndTime":endtime//结束时间
};
//创建二维数组,例如pointArray[i]中i自行车编号,pointArray[i][j]为编号为i的自行车的所有借还站点信息
$.getJSON("./GetAllRecordServlet",{json:JSON.stringify(json)},function(json){
var j = 0;
var stationlonlist=new Array();
var stationlatlist=new Array();
var pointArray=new Array();
var bikeIdlist = new Array();
for(var i = 0; i
function speedtest(pointArray,row){//根据自行车的借还时间差来显示不同的路书速度(待完善)
var distance = 0;//直行车走过的路径长度
for(var i = 0; i =14);
return sjshu;
}
function getColor(){
var hex = ['1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
var yanse="";
for(i=0; i
效果图:

以上就是给爱站技术频道小编为大家带来的JS实现百度地图同时显示多个路书效果,看完都知道怎么操作了吧,希望小编介绍的能帮到大家。
下一篇:JSP页面常见查询与显示方法分析
