百度地图同时显示多个路书

Posted 2020-07-02 洛水三千

 

<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 }

效果图：