• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JSP > js实现百度地图同时显示多个路书效果

js实现百度地图同时显示多个路书效果

作者:屠龙灬世家 字体:[增加 减小] 来源:互联网 时间:2017-05-11

屠龙灬世家通过本文主要向大家介绍了百度地图怎么做路书,百度地图如何制作路书,百度地图路书,百度地图如何做路书,百度路书等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

本文介绍了js实现百度地图同时显示多个路书效果,主要是以自行车的还车地点作为实例,具体代码如下:

启动路书:

<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><!--路书 -->
</div>
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
              }
             



 
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • js实现百度地图同时显示多个路书效果

相关文章

  • 2017-05-11纯jsp实现的倒计时动态显示效果完整代码
  • 2017-05-11JBuilder2005单元测试之捆绑多个用例
  • 2017-05-11JSP简介
  • 2017-05-11实现论坛树型结构的具体算法
  • 2017-05-11经常听朋友说什么J2EE,终于知道点什么是J2EE了,汗一个
  • 2017-05-11JSP开发入门(一)--安装好你的机器来使用JSP
  • 2017-05-11JSP struts2 url传参中文乱码解决办法
  • 2017-05-11JSP学习之JavaBean用法分析
  • 2017-05-11jsp是什么文件 如何打开jsp格式的文件
  • 2017-05-11struts2 spring整合fieldError问题

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 品味Spring 的魅力
    • JSP学习经验小结分享
    • JAVA 18位身份证号码校验码的算法
    • JSP显示中文问题的解决方案
    • JSP运行原理和九大隐式对象说明
    • JSP实现的简单分页示例
    • JSP response对象实现文件下载的两种方式
    • jsp中使用frameset框架 边框固定不让更改边框的大小
    • JSP结合js实现img中src更新请求的方法
    • jsp struts1 标签实例详解第1/2页

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有