文档章节

百度地图沿线运动

ts88
 ts88
发布于 10/11 23:08
字数 730
阅读 5
收藏 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>

 

© 著作权归作者所有

共有 人打赏支持
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
1K
0
百度路书--Baidu_LuShu

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

aguangv5
2017/05/04
401
0
H5获取用户位置API + 百度地图API介绍

一. Geolocaiton API 功能介绍 Geolocation接口是一个用来获取设备地理位置的可编程的对象,它可以让Web内容访问到设备的地理位置,这将允许Web应用基于用户的地理位置提供定制的信息. 出于安全...

大灰狼的小绵羊哥哥
10/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

nginx开启stub_status模块配置方法

nginx开启stub_status模块配置方法 2017年12月13日 15:57:29 ly_dengle 阅读数:3765 标签: stub_statusnginxnginx开启stub_status模块 更多 个人分类: 软件工具php 版权声明:本文为博主原...

linjin200
31分钟前
3
0
挑逗 Java 程序员的那些 Scala 绝技

有个问题一直困扰着 Scala 社区,为什么一些 Java 开发者将 Scala 捧到了天上,认为它是来自上帝之吻的完美语言;而另外一些 Java 开发者却对它望而却步,认为它过于复杂而难以理解。同样是 ...

joymufeng
34分钟前
83
0
精通Spring Boot——第十三篇:整合Mybatis多数据源

久违了,最近度过了一段倦怠期,这段时间干什么都没有动力,拖延症复发。好在我回来了.... ——From me . 进入今天的主题——在Spring Boot 项目中整合mybatis多数据源,其实很简单,其实并不...

developlee的潇洒人生
34分钟前
10
0
ADB控制电视盒子备忘

连接 adb connect 192.169.2.111 获取安装软件的列表 adb shell pm list package 删除 adb uninstall cn.uc.test 安装 adb install xxx.apk...

乐_然
42分钟前
3
0
Hadoop生态系统

首先我们先了解一下Hadoop的起源。然后介绍一些关于Hadoop生态系统中的具体工具的使用方法。如:HDFS、MapReduce、Yarn、Zookeeper、Hive、HBase、Oozie、Mahout、Pig、Flume、Sqoop。 Hadoop...

瑞查德-Jack
48分钟前
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部