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

实现思路：

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. IntelliJ IDEA通过maven构建ssm项目找不到mapper

    idea运行ssm项目的时候一直报错 org.apache.ibatis.binding.BindingException: Invalid bound statement (not found) 原 ...

  2. （C#）找的winform窗体自适应类

    原文:https://www.cnblogs.com/gguozhenqian/p/4288451.html 需要添加引用System.Windows.Forms public class AutoS ...

  3. Could not load file or assembly 'Microsoft.AnalysisServices.SharePoint.Integration'

    In Central Administration, in System Settings, click Manage farm solutions. Click Powerpivotwebapp. ...

  4. Docker学习笔记——制作容器与容器概念

    Docker能做些什么? 1.docker能够解决虚拟机能够解决的问题 2.隔离应用依赖 3.创建应用镜像并复制 4.创建容易分发的即启即用的应用 5.docker的想法是创建软件程序可移植的轻量容器 ...

  5. TmsTimeUtils 时间戳

    package com.sprucetec.tms.utils; import java.math.BigDecimal;import java.text.DateFormat;import java ...

  6. 脱壳系列—— 揭开so section加密的美丽外衣

    i春秋作家:HAI_ 0×00 前言 对so的加密,https://bbs.pediy.com/thread-191649.htm大神的帖子里已经很详细的说明了.当然加密不是我们研究的重点,如何搞掉这 ...

  7. C#6.0语言规范(九) 命名空间

    C#程序使用命名空间进行组织.命名空间既可以用作程序的“内部”组织系统,也可以用作“外部”组织系统 - 一种呈现暴露给其他程序的程序元素的方式. 提供了使用指令(使用指令)以便于使用命名空间. 编译单 ...

  8. centos清华源地址，ubuntu阿里云源

    清华这个源挺好用,替换原先/etc/yum.repos.d/CentOS-Base.repo, 然后运行 sudo yum makecache 生成缓存 centos6 [base] name=Cen ...

  9. ES6之Array.from()方法

    Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组. 那么什么是类数组对象呢?所谓类数组对象,最基本的要求就是具有length属性的对象. 1.将类数组对象转换为真正数 ...

  10. iOS数据持久化--数据库

    一.简介 1.iOS常用的5中存储方式 (1)plist (2)preference(用户属性) (3)归档 (4)数据库 (5)core data 其中(1)(2) (3) 都只能存储小型的数据,因 ...