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

实现思路：

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

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

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

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

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

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

7.查看实例

代码：

  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 {width: 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. var startLongR = 106.652024;
  22. var startLatR = 26.617221;
  23. var endLongR = 106.652024;
  24. var endLatR = 26.614221;
  25. var linesPoints = null;
  26. // 百度地图API功能
  27. var map = new BMap.Map("allmap");    // 创建Map实例
  28. map.centerAndZoom(new BMap.Point(106.652024,26.617221), 15);  // 初始化地图,设置中心点坐标和地图级别
  29. map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
  30. map.setCurrentCity("贵阳");          // 设置地图显示的城市 此项是必须设置的
  31. map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
  32. setInterval(goWay,500);
  33. var carMk;
  34. 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)});//卡车
  35. function goWay(){
  36. startLong = endLong;
  37. startLat = endLat;
  38. endLong = getRound(endLong);
  39. endLat = getRound(endLat);
  40. drawIcon(startLong,startLat,endLong,endLat);
  41. //drawRedLine();
  42. }
  43. function getRound(temp){
  44. var i = Math.round(Math.random()*9+1);
  45. if(i%2==0){
  46. return temp + i*0.0001;
  47. }else{
  48. return temp - i*0.0001;
  49. }
  50. }
  51. function getRound1(temp){
  52. var i = Math.round(Math.random()*9+1);
  53. if(i%2==0){
  54. return temp + i*0.0002;
  55. }else{
  56. return temp - i*0.0002;
  57. }
  58. }
  59. function drawGreenLine(startLong,startLat,endLong,endLat){
  60. var polyline = new BMap.Polyline([
  61. new BMap.Point(startLong,startLat),//起始点的经纬度
  62. new BMap.Point(endLong,endLat)//终止点的经纬度
  63. ], {strokeColor:"green",//设置颜色
  64. strokeWeight:3, //宽度
  65. strokeOpacity:1});//透明度
  66. map.addOverlay(polyline);
  67. }
  68. function drawRedLine(){
  69. startLongR = endLongR;
  70. startLatR = endLatR;
  71. endLongR = getRound1(endLongR);
  72. endLatR = getRound1(endLatR);
  73. var polyline1 = new BMap.Polyline([
  74. new BMap.Point(startLongR,startLatR),//起始点的经纬度
  75. new BMap.Point(endLongR,endLatR)//终止点的经纬度
  76. ], {strokeColor:"red",//设置颜色
  77. strokeWeight:3, //宽度
  78. strokeOpacity:1});//透明度
  79. map.addOverlay(polyline1);
  80. }
  81. function drawIcon(startLong,startLat,endLong,endLat){
  82. if(carMk){
  83. map.removeOverlay(carMk);
  84. }
  85. carMk = new BMap.Marker(
  86. new BMap.Point(endLong,endLat),//起始点的经纬度
  87. {icon:myIcon});
  88. map.addOverlay(carMk);
  89. drawGreenLine(startLong,startLat,endLong,endLat);
  90. }
  91. </script>

百度地图API，根据经纬度实现车辆移动轨迹绘制的更多相关文章

  1. 通过百度地图API获取经纬度以及两点间距离

    package com.baidumap; import java.io.BufferedReader; import java.io.IOException; import java.io.Inpu ...

  2. vue项目使用百度地图API获取经纬度

    一.首先在百度api注册获得ak密钥 二.进行引入 (1).第一种方式: 直接在vue中index.html中用script标签引入. //你的ak密钥需要替换真实的你的ak码 <script ...

  3. java 基于百度地图API GPS经纬度解析地址

    首先这是百度地图api 的接口地址,基于接口的参数,不过多介绍,其中都提供相应的介绍: http://lbsyun.baidu.com/index.php?title=webapi/guide/web ...

  4. 百度地图API实时画出动态运行轨迹（一条行驶轨迹），车头实时指向行驶方向，设置角度偏移

    参考网址:https://blog.csdn.net/skywqnan/article/details/79036262 改变车的方向:http://www.cnblogs.com/peixuanzh ...

  5. Python 读取照片的信息：拍摄时间、拍摄设备、经纬度等，以及根据经纬度通过百度地图API获取位置

    通过第三方库exifread读取照片信息.exifread官网:https://pypi.org/project/ExifRead/ 一.安装exifreadpip install exifread ...

  6. Python调用百度地图API实现批量经纬度转换为实际省市地点（api调用，json解析，excel读取与写入）

    1.获取秘钥 调用百度地图API实现得申请百度账号或者登陆百度账号,然后申请自己的ak秘钥.链接如下:http://lbsyun.baidu.com/apiconsole/key?applicatio ...

  7. 利用百度地图API和群蚁算法，对TSP问题进行模拟与求解

    前言 最近由于换了工作,期间也有反思和总结上家公司的得失,总觉得有什么事情当初可以完成或者完成得更好,其中TSP问题就是其中之一.当初在开发一个仓配系统的时候,有一个线路排程的需求,当时自己简单在纸上 ...

  8. [转]百度地图API详解之地图坐标系统

    博客原文地址:http://www.jiazhengblog.com/blog/2011/07/02/289/ 我们都知道地球是圆的,电脑显示器是平的,要想让位于球面的形状显示在平面的显示器上就必然需 ...

  9. 百度地图api的简单应用

    百度地图api 获取经纬度(通过浏览器的) //获取经纬度 window.navigator.geolocation.getCurrentPosition(function(position) { a ...

随机推荐

  1. 【UOJ244】 【UER #7】短路（贪心）

    传送门 uoj Solution 简单题? 考虑一条路径长什么样子,一定是经过某一个字母环的左上角,那么答案就很简单了. 我们记一个前缀最小值,这样子让他一路走下去一定是最优! 然后扫一遍就好了. 代 ...

  2. per学习笔记-zkclient,curator使用

    开源客户端,原生api的不足 连接的创建是异步的,需要开发人员自行编码实现等待 连接没有自动的超时重连机制 Zk本身没提供序列化机制,需要开发人员自行指定,从而实现数据的序列化和反序列化 Watche ...

  3. WebDriver高级应用实例（4）

    4.1操作web页面的滚动条 被测网页的网址: http://v.sogou.com Java语言版本的API实例代码 import org.testng.annotations.Test; impo ...

  4. 12-01 Java Scanner类，Scanner类中的nextLine()产生的换行符问题

    分析理解:Scanner sc = new Scanner(System.in); package cn.itcast_01; /* * Scanner:用于接收键盘录入数据. * * 前面的时候: ...

  5. HuLu机器学习问题与解答系列(1-8)

    声明:本系列文章转载自微信公众号HULU,本人只是搬运工,仅供学习,如有不妥,后续告知删除. 嗨,欢迎回来,希望你能保持定期回顾的好习惯噢!下面是Hulu机器学习问题与解答系列的前8篇内容,点击主题名 ...

  6. 10分钟打造强大的gvim

    感谢Ruchee的共享精神,让我等vim新手省去了配置vim的麻烦(教程地址:配置文件使用指南). 只需要简单的6个步骤,就可以配置完成一个强大的gvim神器,下图是我的最终配置效果图. (另外,我的 ...

  7. keytool和openssl生成的证书转换

    keytool和openssl生成的证书转换 keytool生成证书示例 生成私钥+证书: keytool -genkey -alias client -keysize 2048 -validity ...

  8. spring与struts简单整合案例

    Spring,负责对象对象创建 Struts, 用Action处理请求 Spring与Struts框架整合, 关键点:让struts框架action对象的创建,交给spring完成! 步骤: 1)引入 ...

  9. mysql-定时对表分区

    1, 分区 具体可见: http://blog.csdn.net/open_data/article/details/46893331 1, 分区类型: RANGE分区:基于属于一个给定连续区间的列值 ...

  10. filebeat-2-通过kafka队列链接logstash

    filebeat 直接到logstash, 由于logstash的设计问题, 可能会出现阻塞问题, 因为中间使用消息队列分开 可以使用redis, 或者kafka, 这儿使用的是kafka 1, 安装 ...