文档章节

百度地图沿线运动

ts88
 ts88
发布于 10/11 23:08
字数 730
阅读 6
收藏 0
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>轨迹回放(路书)</title>
    <style type="text/css">
        body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
        #map_canvas{width:100%;height:500px;}
        #result {width:100%}
    </style>
    <script src="http://api.map.baidu.com/api?v=1.2&services=true"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>
</head>
<body>
    <div id="map_canvas"></div>
    <div id="result"></div>
    <button id="run">开始</button>
    <button id="stop">停止</button>
    <button id="pause">暂停</button>
    <button id="hide">隐藏信息窗口</button>
    <button id="show">展示信息窗口</button>
    <script>
    var marker;
    var map = new BMap.Map('map_canvas');
    map.enableScrollWheelZoom();
    map.centerAndZoom();
    var lushu;
    // 实例化一个驾车导航用来生成路线
  //  var drv = new BMap.DrivingRoute('北京', {
   //     onSearchComplete: function(res) {
    //        if (drv.getStatus() == BMAP_STATUS_SUCCESS) {
              //  var plan = res.getPlan(0);
               // var arrPois =[];
//                for(var j=0;j<plan.getNumRoutes();j++){
                 //   var route = plan.getRoute(j);
                 //   arrPois= arrPois.concat(route.getPath());
               // }
      var arrPois = [new BMap.Point(113.33765, 23.150435), new BMap.Point(113.357655, 25.170435)
      
     ];//    map.addOverlay(new BMap.Polyline(arrPois, {strokeColor: '#111'})); //不画线
                map.setViewport(arrPois);
                   marker=new BMap.Marker(arrPois[0],{
                      icon  : new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/car.png', new BMap.Size(52,26),{anchor : new BMap.Size(27, 13)})
                   });
      var label = new BMap.Label("粤A30780",{offset:new BMap.Size(0,-30)});
      label.setStyle({border:"1px solid rgb(204, 204, 204)",color: "rgb(0, 0, 0)",borderRadius:"10px",padding:"5px",background:"rgb(255, 255, 255)",});
                marker.setLabel(label);
                 
      map.addOverlay(marker);
     BMapLib.LuShu.prototype._move=function(initPos,targetPos,effect) {
            var pointsArr=[initPos,targetPos];  //点数组
            var me = this,
                //当前的帧数
                currentCount = 0,
                //步长,米/秒
                timer = 1000,
                step = this._opts.speed / (1000 / timer),
                //初始坐标
                init_pos = this._projection.lngLatToPoint(initPos),
                //获取结束点的(x,y)坐标
                target_pos = this._projection.lngLatToPoint(targetPos),
                //总的步长
                count = Math.round(me._getDistance(init_pos, target_pos) / step);
                 //显示折线 syj201607191107
            this._map.addOverlay(new BMap.Polyline(pointsArr, { 
                strokeColor : "#111", 
                strokeWeight : 5, 
                strokeOpacity : 0.5 
            })); // 画线 
            //如果小于1直接移动到下一点
            if (count < 1) {
                me._moveNext(++me.i);
                return;
            }
            me._intervalFlag = setInterval(function() {
            //两点之间当前帧数大于总帧数的时候,则说明已经完成移动
                if (currentCount >= count) {
                    clearInterval(me._intervalFlag);
                    //移动的点已经超过总的长度
                    if(me.i > me._path.length){
                        return;
                    }
                    //运行下一个点
                    me._moveNext(++me.i);
                }else {
                        currentCount++;
                        var x = effect(init_pos.x, target_pos.x, currentCount, count),
                            y = effect(init_pos.y, target_pos.y, currentCount, count),
                            pos = me._projection.pointToLngLat(new BMap.Pixel(x, y));
                        //设置marker
                        if(currentCount == 1){
                            var proPos = null;
                            if(me.i - 1 >= 0){
                                proPos = me._path[me.i - 1];
                            }
                            if(me._opts.enableRotation == true){
                                 me.setRotation(proPos,initPos,targetPos);
                            }
                            if(me._opts.autoView){
                                if(!me._map.getBounds().containsPoint(pos)){
                                    me._map.setCenter(pos);
                                }  
                            }
                        }
                        //正在移动
                        me._marker.setPosition(pos);
                        //设置自定义overlay的位置
                        me._setInfoWin(pos);  
                    }
            },timer);
        };
                lushu = new BMapLib.LuShu(map,arrPois,{
                defaultContent:"粤A30780",//"从天安门到百度大厦"
                autoView:true,//是否开启自动视野调整,如果开启那么路书在运动过程中会根据视野自动调整
                icon  : new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/car.png', new BMap.Size(52,26),{anchor : new BMap.Size(27, 13)}),
                speed: 4500,
                enableRotation:true,//是否设置marker随着道路的走向进行旋转
                   landmarkPois:[
                   {lng:116.306954,lat:40.05718,html:'加油站',pauseTime:2}
                  ]
                    
                }); 
         
      marker.addEventListener("click",function(){
        marker.enableMassClear();   //设置后可以隐藏改点的覆盖物
        marker.hide();
        lushu.start();
        //map.clearOverlays();  //清除所有覆盖物
      });
            //}
//        }
  //  });
    //drv.search('天安门', '百度大厦');
     // lushu.start();
     // lushu.pause();
    //绑定事件
    $("run").onclick = function(){
      marker.enableMassClear(); //设置后可以隐藏改点的覆盖物
      marker.hide();
      lushu.start();
     // map.clearOverlays();    //清除所有覆盖物
    }
    $("stop").onclick = function(){
        lushu.stop();
    }
    $("pause").onclick = function(){
        lushu.pause();
    }
    $("hide").onclick = function(){
        lushu.hideInfoWindow();
    }
    $("show").onclick = function(){
        lushu.showInfoWindow();
    }
    function $(element){
        return document.getElementById(element);
    }
</script>
</body>
</html>

 

© 著作权归作者所有

共有 人打赏支持
上一篇: test
ts88
粉丝 0
博文 9
码字总数 2328
作品 0
南京
私信 提问
nmgwap/百度地图轨迹,多个标注点,坐标拾取

百度地图api实现运动轨迹、坐标拾取、多点标注并显示信息窗体 平台页面功能说明 获取多个坐标点标注在地图上 根据不同状态显示不同的信息窗口样式 根据地址检索坐标点(可显示多个) 鼠标点击...

nmgwap
03/30
0
0
基于html5绘制上海地铁图 - 路况信息展示

前面介绍了上海地铁图的绘制,最近有客户提出了新的需求:双车道,并显示路网状态信息。经过一番研究,在原地铁图基础上做了扩展实现 交通图介绍 路况状态在GIS系统中广泛应用,谷歌地图,百...

nosand
2014/05/13
0
19
百度地图新手教程7(转载自百度)

工具 1.地图工具概述 2.向地图添加工具 3.通过按钮控制工具的开启和关闭 4.拉框放大工具 地图工具概述 提示:工具已经制作成开源库(lib)对外免费开放,可直接访问JavaScript 开源库。若您需...

长平狐
2013/01/06
2K
0
百度路书--Baidu_LuShu

根据百度路书现有 js 编写,包含 GPS 轨迹运动功能,优化原有 Bug。 新增功能快进、回放功能,如有错误,欢迎反馈! 原网址 http://developer.baidu.com/map/jsdemo.htm#c28 需要有一个百度地...

aguangv5
2017/05/04
401
0
谷歌卫星地图如何添加、修改和删除多边形面

万能地图下载器除了有强大的谷歌影像下载、历史地图下载、高程等高线下载、矢量电子地图下载、百度POI下载、矢量建筑数据下载,以及瓦片导出、专业坐标系的投影转换等专业功能(如北京54或西...

mrib
03/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

中国龙-扬科
23分钟前
2
0
使用vuex的state状态对象的5种方式

vuex是一个专门为vue.js设计的状态管理模式,并且也可以使用devtools进行调试。 下面给大家来贴一下我的vuex的结构 下面是store文件夹下的state.js和index.js内容 //state.jsconst state =...

peakedness丶
27分钟前
1
0
NetCore MVC Demo

地址:http://114.116.9.72:5411

whltian
34分钟前
1
0
Netty handle方法周期 (四)

写了一个练习之后,发现自定义的助手类每次肯定是必须的,对于不同的业务逻辑需求,会写相对应的逻辑 最简单的查看Handle生命周期的方式,就是重写上级方法,看名字差不多应该可以知道方法的作用 ...

_大侠__
39分钟前
7
0
vue主动刷新页面及列表数据删除后的刷新实例

1.场景 在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。 2.遇到的问题 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.reload(),或者...

前端小攻略
49分钟前
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部