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

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

    实现思路：

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

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

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

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

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

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

    7.查看实例

    代码：

    [html] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    5.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
    6.     <style type="text/css">  
    7.     body, html,#allmap { 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}  
    8.     </style>  
    9.     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=E06eb9d756d0eafc722effb355657b4c"></script>  
    10.     <title>车辆运行轨迹测试</title>  
    11. <script src="http://c.cnzz.com/core.php"></script></head>  
    12. <body>  
    13.     <div id="allmap"></div>  
    14. </body>  
    15. </html>  
    16. <script type="text/javascript">  
    17.     var startLong = 106.652024;  
    18.     var startLat = 26.617221;  
    19.     var endLong = 106.652024;  
    20.     var endLat = 26.614221;  
    21.       
    22.     var startLongR = 106.652024;  
    23.     var startLatR = 26.617221;  
    24.     var endLongR = 106.652024;  
    25.     var endLatR = 26.614221;  
    26.       
    27.       
    28.   
    29.     var linesPoints = null;  
    30.     // 百度地图API功能  
    31.     var map = new BMap.Map("allmap");    // 创建Map实例  
    32.     map.centerAndZoom(new BMap.Point(106.652024,26.617221), 15);  // 初始化地图,设置中心点坐标和地图级别  
    33.     map.addControl(new BMap.MapTypeControl());   //添加地图类型控件  
    34.     map.setCurrentCity("贵阳");          // 设置地图显示的城市 此项是必须设置的  
    35.     map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放  
    36.      
    37.    setInterval(goWay,500);  
    38.    var carMk;  
    39.    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)});//卡车  
    40.      
    41.    function goWay(){  
    42.        startLong = endLong;  
    43.        startLat = endLat;  
    44.        endLong = getRound(endLong);  
    45.        endLat = getRound(endLat);  
    46.          
    47.        drawIcon(startLong,startLat,endLong,endLat);  
    48.        //drawRedLine();  
    49.    }  
    50.      
    51.    function getRound(temp){  
    52.        var i = Math.round(Math.random()*9+1);  
    53.        if(i%2==0){  
    54.            return temp + i*0.0001;  
    55.        }else{  
    56.            return temp - i*0.0001;  
    57.        }  
    58.    }  
    59.    function getRound1(temp){  
    60.        var i = Math.round(Math.random()*9+1);  
    61.        if(i%2==0){  
    62.            return temp + i*0.0002;  
    63.        }else{  
    64.            return temp - i*0.0002;  
    65.        }  
    66.    }  
    67.      
    68.    function drawGreenLine(startLong,startLat,endLong,endLat){  
    69.        var polyline = new BMap.Polyline([  
    70.                                           new BMap.Point(startLong,startLat),//起始点的经纬度  
    71.                                           new BMap.Point(endLong,endLat)//终止点的经纬度  
    72.                                           ], {strokeColor:"green",//设置颜色   
    73.                                           strokeWeight:3, //宽度  
    74.                                           strokeOpacity:1});//透明度  
    75.        map.addOverlay(polyline);  
    76.    }  
    77.      
    78.    function drawRedLine(){  
    79.        startLongR = endLongR;  
    80.        startLatR = endLatR;  
    81.        endLongR = getRound1(endLongR);  
    82.        endLatR = getRound1(endLatR);  
    83.        var polyline1 = new BMap.Polyline([  
    84.                                           new BMap.Point(startLongR,startLatR),//起始点的经纬度  
    85.                                           new BMap.Point(endLongR,endLatR)//终止点的经纬度  
    86.                                           ], {strokeColor:"red",//设置颜色   
    87.                                           strokeWeight:3, //宽度  
    88.                                           strokeOpacity:1});//透明度  
    89.        map.addOverlay(polyline1);  
    90.    }  
    91.   
    92.    function drawIcon(startLong,startLat,endLong,endLat){  
    93.        if(carMk){  
    94.            map.removeOverlay(carMk);  
    95.        }  
    96.        carMk = new BMap.Marker(  
    97.                    new BMap.Point(endLong,endLat),//起始点的经纬度  
    98.                   {icon:myIcon});  
    99.        map.addOverlay(carMk);  
    100.        drawGreenLine(startLong,startLat,endLong,endLat);  
    101.    }  
    102. </script>  
  • 相关阅读:
    Codeforces 798C
    Codeforces 798B
    Codeforces 798A
    HDU
    HDU
    HDU
    加速cin的技巧
    Codeforces Gym
    Codeforces Gym
    Solutions to an Equation LightOJ
  • 原文地址：https://www.cnblogs.com/jjg0519/p/6674640.html
Copyright © 2020-2023  润新知