您的位置：首页 > 其它

百度地图API，根据经纬度实现车辆移动轨迹绘制

2017-03-31 21:10 2096 查看

百度地图，实现车辆轨迹绘制

实现思路：

1.根据经纬度实现车辆轨迹绘制

2.使用百度地图API的两个覆盖物实现，Polyline（折线）绘制轨迹，Marker（图标）绘制小车图标

3.将每两个坐标间连线起来，形成连贯的轨迹线路

4.生成下一个图标后删除上一个绘制的图标，形成小车移动动画感

5.本例使用的是临近的随机坐标点

6.初学者，欢迎大家交流学习

7.查看实例

代码：

[html] view
plain copy

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" <
18697
/span>/>

    <style type="text/css">

    body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}

    </style>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=E06eb9d756d0eafc722effb355657b4c"></script>

    <title>车辆运行轨迹测试</title>

<script src="http://c.cnzz.com/core.php"></script></head>

<body>

    <div id="allmap"></div>

</body>

</html>

<script type="text/javascript">

    var startLong = 106.652024;

    var startLat = 26.617221;

    var endLong = 106.652024;

    var endLat = 26.614221;



    var startLongR = 106.652024;

    var startLatR = 26.617221;

    var endLongR = 106.652024;

    var endLatR = 26.614221;







    var linesPoints = null;

    // 百度地图API功能

    var map = new BMap.Map("allmap");    // 创建Map实例

    map.centerAndZoom(new BMap.Point(106.652024,26.617221), 15);  // 初始化地图,设置中心点坐标和地图级别

    map.addControl(new BMap.MapTypeControl());   //添加地图类型控件

    map.setCurrentCity("贵阳");          // 设置地图显示的城市此项是必须设置的

    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放



   setInterval(goWay,500);

   var carMk;

   var myIcon = new BMap.Icon("http://sandbox.runjs.cn/uploads/rs/101/wmbvrxnx/kache.png", new BMap.Size(37,25), {imageOffset: new BMap.Size(0, 0)});//卡车



   function goWay(){

       startLong = endLong;

       startLat = endLat;

       endLong = getRound(endLong);

       endLat = getRound(endLat);



       drawIcon(startLong,startLat,endLong,endLat);

       //drawRedLine();

   }



   function getRound(temp){

       var i = Math.round(Math.random()*9+1);

       if(i%2==0){

           return temp + i*0.0001;

       }else{

           return temp - i*0.0001;

       }

   }

   function getRound1(temp){

       var i = Math.round(Math.random()*9+1);

       if(i%2==0){

           return temp + i*0.0002;

       }else{

           return temp - i*0.0002;

       }

   }



   function drawGreenLine(startLong,startLat,endLong,endLat){

       var polyline = new BMap.Polyline([

                                          new BMap.Point(startLong,startLat),//起始点的经纬度

                                          new BMap.Point(endLong,endLat)//终止点的经纬度

                                          ], {strokeColor:"green",//设置颜色

                                          strokeWeight:3, //宽度

                                          strokeOpacity:1});//透明度

       map.addOverlay(polyline);

   }



   function drawRedLine(){

       startLongR = endLongR;

       startLatR = endLatR;

       endLongR = getRound1(endLongR);

       endLatR = getRound1(endLatR);

       var polyline1 = new BMap.Polyline([

                                          new BMap.Point(startLongR,startLatR),//起始点的经纬度

                                          new BMap.Point(endLongR,endLatR)//终止点的经纬度

                                          ], {strokeColor:"red",//设置颜色

                                          strokeWeight:3, //宽度

                                          strokeOpacity:1});//透明度

       map.addOverlay(polyline1);

   }



   function drawIcon(startLong,startLat,endLong,endLat){

       if(carMk){

           map.removeOverlay(carMk);

       }

       carMk = new BMap.Marker(

                   new BMap.Point(endLong,endLat),//起始点的经纬度

                  {icon:myIcon});

       map.addOverlay(carMk);

       drawGreenLine(startLong,startLat,endLong,endLat);

   }

</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航