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

实现思路：

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. 如何获取帮助———— QQ群讨论摘要

    QQ群对话整理(删除一些简单的回应),对一些重要的地方,我做了一些加粗   宝玉 2015/9/21 1:49:05       这次题目还有个问题就是如何读取Excel,我想对于很多同学来说是个困难 ...

  2. 使用PerfView监测.NET程序性能（三）：分组

    在上一篇博客中,我们通过Perfview帮助文件中自带的代码来简单使用了Perfview,了解了基本操作.现在来看看Perfview中的分组操作(Grouping).分组功能都旨将记录到的各种函数调用 ...

  3. Spring Security ——AuthenticationProvider

    AuthenticationProvider 目录 1.1     用户信息从数据库获取 1.1.1    使用jdbc-user-service获取 1.1.2    直接使用JdbcDaoImpl ...

  4. redis-master/slave模式

    类似mysql的master-slave模式一样,redis的master-slave可以提升系统的可用性,master节点写入cache后,会自动同步到slave上. 环境: master node ...

  5. .NET Core 跨平台 串口通讯 ，Windows/Linux 串口通讯，flyfire.CustomSerialPort 的使用

    目录 1,前言 2,安装虚拟串口软件 3,新建项目,加入 flyfire.CustomSerialPort 4,flyfire.CustomSerialPort 说明 5,开始使用 flyfire.C ...

  6. ASP.Net MVC OA项目笔记<二>

    1.1.0 创建数据层 1.1.1 CZBK.ItcastOA.IDAL 引用 CZBK.ItcastOA.Model 1.2.1 给IDAL添加一个接口IUserInfoDal 里面写增删改查分页的 ...

  7. 背水一战 Windows 10 (42) - 控件（导航类）: Frame 动画

    [源码下载] 背水一战 Windows 10 (42) - 控件(导航类): Frame 动画 作者:webabcd 介绍背水一战 Windows 10 之 控件(导航类) Frame 动画 示例An ...

  8. Poetry

    1. Absence to love is what wind is to fire. It extinguishes the small; It inflames the great. 2. It ...

  9. kali linux 安装sublime text3完全教程

    点击进入官网 下载页面 将鼠标放在64 bit(64位系统)上右击复制链接 打开终端: #wget 路径(粘贴刚复制的) #tar -xvvf 刚刚下载的文件文件名(解压) #mv 解压出来的文件名  ...

  10. Python学习之二

    基础语法 一.起始行 #!/usr/bin/python 或 #!/usr/bin/env python 目的是在运行python脚本的时候告诉系统我们要用Python解释器去运行py脚本 # -*- ...