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用echarts实现报表统计

下一篇:JSP页面常见查询与显示方法分析

您可能感兴趣的文章

相关阅读

热门软件源码

最新软件源码下载