2019獨角獸企業重金招聘Python工程師標準>>>
?
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=自己的ak"></script>
<script type="text/javascript" src="js/lushu.js"></script><!--路書 -->
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("-") < 0 && e.indexOf("_") < 0
) {return e}return e.replace(/[-_][^-_]/g,
function(f) {return f.charAt(1
).toUpperCase()})};a.dom.getStyle =
function(g, f) {var i =
a.dom;g =
i.g(g);f =
a.string.toCamelCase(f);var h = g.style[f] || (g.currentStyle ? g.currentStyle[f] : ""
)||
i.getComputedStyle(g, f);if (!
h) {var e =
i._styleFixer[f];if (e) {h = e.get ?
e.get(g) : a.dom.getStyle(g, e)}}if (e =
i._styleFilter) {h = e.filter(f, h, "get"
)}return h};a.getStyle =
a.dom.getStyle;a.dom._NAME_ATTRS = (
function() {var e =
{cellpadding : "cellPadding"
,cellspacing : "cellSpacing"
,colspan : "colSpan"
,rowspan : "rowSpan"
,valign : "vAlign"
,usemap : "useMap"
,frameborder : "frameBorder"
};if (a.browser.ie < 8
) {e["for"] = "htmlFor"
;e["class"] = "className"
} else {e.htmlFor = "for"
;e.className = "class"
}return e})();a.dom.setAttr =
function(f, e, g) {f =
a.dom.g(f);if ("style" ==
e) {f.style.cssText =
g} else {e = a.dom._NAME_ATTRS[e] ||
e;f.setAttribute(e, g)}return f};a.setAttr =
a.dom.setAttr;a.dom.setAttrs =
function(g, e) {g =
a.dom.g(g);for (
var f
in e) {a.dom.setAttr(g, f, e[f])}return g};a.setAttrs =
a.dom.setAttrs;a.dom.create =
function(g, e) {var h = document.createElement(g), f = e ||
{};return a.dom.setAttrs(h, f)};a.object = a.object ||
{};a.extend = a.object.extend =
function(g, e) {for (
var f
in e) {if (e.hasOwnProperty(f)) {g[f] =
e[f]}}return g}})();var c = BMapLib.LuShu =
function(g, f, e) {if (!f || f.length < 1
) {return}this._map =
g;this._path =
f;this.i = 0
;this._setTimeoutQuene =
[];this._projection =
this._map.getMapType().getProjection();this._opts =
{icon : null,speed : 4000
,defaultContent : ""
};this._setOptions(e);this._rotation = 0
;if (!
this._opts.icon
instanceof BMap.Icon) {this._opts.icon =
defaultIcon}};c.prototype._setOptions =
function(e) {if (!
e) {return}for (
var f
in e) {if (e.hasOwnProperty(f)) {this._opts[f] =
e[f]}}};c.prototype.start =
function() {var f =
this, e =
f._path.length;if (f.i && f.i < e - 1
) {if (!
f._fromPause) {return} else {if (!
f._fromStop) {f._moveNext(++
f.i)}}} else {f._addMarker();f._timeoutFlag = setTimeout(
function() {f._addInfoWin();if (f._opts.defaultContent == ""
) {f.hideInfoWindow()}f._moveNext(f.i)}, 400
)}this._fromPause =
false;this._fromStop =
false}, c.prototype.stop =
function() {this.i = 0
;this._fromStop =
true;clearInterval(this._intervalFlag);this._clearTimeout();for (
var g = 0, f =
this._opts.landmarkPois, e = f.length; g < e; g++
) {f[g].bShow =
false}};c.prototype.pause =
function() {clearInterval(this._intervalFlag);this._fromPause =
true;this._clearTimeout()};c.prototype.hideInfoWindow =
function() {this._overlay._div.style.visibility = "hidden"
};c.prototype.showInfoWindow =
function() {this._overlay._div.style.visibility = "visible"
};a.object.extend(c.prototype,{_addMarker : function(f) {if (
this._marker) {this.stop();this._map.removeOverlay(
this._marker);clearTimeout(this._timeoutFlag)}this._overlay&&
this._map.removeOverlay(
this._overlay);var e =
new BMap.Marker(
this._path[0
]);this._opts.icon && e.setIcon(
this._opts.icon);this._map.addOverlay(e);e.setAnimation(BMAP_ANIMATION_DROP);this._marker =
e},_addInfoWin : function() {var f =
this;var e =
new d(f._marker.getPosition(),f._opts.defaultContent);e.setRelatedClass(this);this._overlay =
e;this._map.addOverlay(e)},_getMercator : function(e) {return this._map.getMapType().getProjection().lngLatToPoint(e)},_getDistance : function(f, e) {return Math.sqrt(Math.pow(f.x - e.x, 2
)+ Math.pow(f.y - e.y, 2
))},_move : function(n, j, m) {var i =
this, h = 0, e = 10, f =
this._opts.speed/ (1000 / e), l =
this._projection.lngLatToPoint(n), k =
this._projection.lngLatToPoint(j), g =
Math.round(i._getDistance(l, k)/
f);if (g < 1
) {i._moveNext(++
i.i);return}i._intervalFlag =
setInterval(function() {if (h >=
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 <
f.x) {e = -e + 90 + 90
} else {e = -
e}j._marker.setRotation(-
e)} else {var h = m.y -
f.y;var i = 0
;if (h > 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 <
this._path.length - 1
) {f._move(f._path[e], f._path[e + 1
],f._tween.linear)}},_setInfoWin : function(g) {var f =
this;if (!
f._overlay) {return}f._overlay.setPosition(g, f._marker.getIcon().size);var e =
f._troughPointIndex(g);if (e != -1
) {clearInterval(f._intervalFlag);f._overlay.setHtml(f._opts.landmarkPois[e].html);f._overlay.setPosition(g,f._marker.getIcon().size);f._pauseForView(e)} else {f._overlay.setHtml(f._opts.defaultContent)}},_pauseForView : function(e) {var g =
this;var f = setTimeout(
function() {g._moveNext(++
g.i)}, g._opts.landmarkPois[e].pauseTime * 1000
);g._setTimeoutQuene.push(f)},_clearTimeout : function() {for (
var e
in this._setTimeoutQuene) {clearTimeout(this._setTimeoutQuene[e])}this._setTimeoutQuene.length = 0
},_tween : {linear : function(f, j, h, i) {var e = f, l = j - f, g = h, k =
i;return l * g / k +
e}},_troughPointIndex : function(f) {var h =
this._opts.landmarkPois, j;for (
var g = 0, e = h.length; g < e; g++
) {if (!
h[g].bShow) {j =
this._map.getDistance(
new BMap.Point(h[g].lng, h[g].lat), f);if (j < 10
) {h[g].bShow =
true;return g}}}return -1
}});function d(e, f) {this._point =
e;this._html =
f}d.prototype =
new BMap.Overlay();d.prototype.initialize =
function(e) {var f =
this._div =
a.dom.create("div"
,{style : "border:solid 1px #ccc;width:auto;min-width:50px;text-align:center;position:absolute;background:#fff;color:#000;font-size:12px;border-radius: 10px;padding:5px;white-space: nowrap;"
});f.innerHTML =
this._html;e.getPanes().floatPane.appendChild(f);this._map =
e;return f};d.prototype.draw =
function() {this.setPosition(
this.lushuMain._marker.getPosition(),this.lushuMain._marker.getIcon().size)};a.object.extend(d.prototype, {setPosition : function(h, i) {var f =
this._map.pointToOverlayPixel(h), e =
a.dom.getStyle(this._div, "width"), g =
a.dom.getStyle(this._div, "height"
);overlayW = parseInt(
this._div.clientWidth || e, 10
),overlayH = parseInt(
this._div.clientHeight || g, 10
);this._div.style.left = f.x - overlayW / 2 + "px"
;this._div.style.bottom = -(f.y - i.height) + "px"
},setHtml : function(e) {this._div.innerHTML =
e},setRelatedClass : function(e) {this.lushuMain =
e}})
})(); 路書js
?
1 function showallrecord(starttime,endtime){//顯示多條開始結束時間之間的自行車路書
2 var bikeId=
null;
3 $.getJSON("./GetBickIdServlet",
function(json){
4 bikeId = json;
//所有自行車編號
5 });
6 var json=
{
7 "StartTime":starttime,
//開始時間
8 "EndTime":endtime
//結束時間
9 };
10 //創建二維數組，例如pointArray[i]中i自行車編號，pointArray[i][j]為編號為i的自行車的所有借還站點信息
11 $.getJSON("./GetAllRecordServlet",{json:JSON.stringify(json)},
function(json){
12 var j = 0
;
13 var stationlonlist=
new Array();
14 var stationlatlist=
new Array();
15 var pointArray=
new Array();
16 var bikeIdlist =
new Array();
17 for(
var i = 0; i < bikeId.length; i++
){
18 stationlonlist[i] =
new Array();
19 stationlatlist[i] =
new Array();
20 pointArray[i] =
new Array();
21 bikeIdlist[i] =
bikeId[i].BikeId;
22 }
23 var tt = json.length < 200?json.length:200;
//如果查詢出來的自行車借還站點記錄多于200條，則顯示200條。（待完善）
24 for (
var row = 0; row < pointArray.length; row++
) {
25 while (j <
tt) {
26 var k =
j;
27 var p = 0
;
28 var stationlon = parseFloat(json[j].Stationlon);
// String類型轉換成float類型
29 stationlonlist[row][p]=stationlon;
// 將stationlon放到stationlonlist里
30 var stationlat =
parseFloat(json[j].Stationlat);
31 stationlatlist[row][p]=stationlat;
// 將stationlat放到stationlatlist里
32 pointArray[row][p] =
new BMap.Point(stationlon,stationlat);
33 while (bikeIdlist[row] == json[k + 1
].BikeId) {
34 k++
;
35 p++
;
36 stationlon= parseFloat(json[k].Stationlon);
// String類型轉換成float類型
37 stationlonlist[row][p]=stationlon;
// 將stationlon放到stationlonlist里
38 stationlat=
parseFloat(json[k].Stationlat);
39 stationlatlist[row][p] =stationlat;
// 將stationlat放到stationlatlist里
40 pointArray[row][p] =
new BMap.Point(stationlon, stationlat);
41 }
42 addMarkertest(pointArray,row);
//添加標記點
43 j = k + 1
;
44 break;
45 }
46 var bikespeedtest = speedtest(pointArray,row);
//每輛自行車路書的速度
47 polylinetest(pointArray,row,stationlonlist,stationlatlist);
//每輛自行車借還站點間畫折線
48 lushutest(pointArray,bikespeedtest,row,stationlonlist,stationlatlist);
//每輛自行車借還站點的路書路徑
49 }
50 map.setViewport(pointArray);
51 });
52 }
?
1 function speedtest(pointArray,row){
//根據自行車的借還時間差來顯示不同的路書速度（待完善）
2 var distance = 0;
//直行車走過的路徑長度
3 for(
var i = 0; i < pointArray[row].length-1; i++
){
4 distance += (map.getDistance(pointArray[row][i],pointArray[row][i+1]));
//自行車借還站點的路徑長度
5 }
6 return distance/20;//速度=路徑長度/
時間（此處時間固定，可改為根據數據庫讀取的時間）
7 }
8
9 //
10 function polylinetest(pointArray,row,stationlonlist,stationlatlist){
11 var points =
new Array();
12 for(
var i = 0; i < pointArray[row].length; i++
){
13 points[i] =
new BMap.Point(parseFloat(stationlonlist[row][i]), parseFloat(stationlatlist[row][i]));
14 }
15 //增加點與點之間的連線
16 var polyline =
new BMap.Polyline(points, {
17 strokeColor : getColor(),
18 strokeWeight : 2
,
19 strokeOpacity : 0.5
20 });
// 創建折線
21 map.addOverlay(polyline);
// 繪制折線
22 }
23
24 //
25 function lushutest(pointArray,bikespeedtest,row,stationlonlist,stationlatlist){
26 var points =
new Array();
27 for(
var i = 0; i < pointArray[row].length; i++
){
28 points[i] =
new BMap.Point(parseFloat(stationlonlist[row][i]), parseFloat(stationlatlist[row][i]));
29 }
30 var lushu =
new BMapLib.LuShu(map, points, {
31 defaultContent : ""
,
32 autoView :
true,
// 是否開啟自動視野調整，如果開啟那么路書在運動過程中會根據視野自動調整
33 icon :
new BMap.Icon('photo/bike.png',
new BMap.Size(22, 22
), {
34 anchor :
new BMap.Size(10, 25
)
35 }),
36 // enableRotation: true, //是否設置marker隨著道路的走向進行旋轉
37 speed : bikespeedtest,
38 });
39 lushu.start();
40 }
41
43 //生成折線的隨機顏色
44 function sj16(){
45 var sjshu=Math.round(Math.random()*10*2
);
46 do
47 {
48 sjshu=Math.round(Math.random()*10*2
);
49 }
while (sjshu>=14
);
50 return sjshu;
51 }
52 function getColor(){
53 var hex = ['1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'
];
54 var yanse=""
;
55 for(i=0; i<6; i++
){
56 yanse+=
hex[sj16()];
57 }
58 return "#"+
yanse
59 }
效果圖：
轉載于:https://my.oschina.net/landiljy/blog/651043
總結
以上是生活随笔為你收集整理的百度地图同时显示多个路书的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
