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

实现思路：

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. python操作excel及json

    有一个存着学生成绩的文件:stuscore.txt,里面存的是json串,json串读起来特别不直观,需要你写代码把它都写到excel中,并计算出总分和平均分,json格式如下: { ":[ ...

  2. Spring IOC 容器源码分析 - 获取单例 bean

    1. 简介 为了写 Spring IOC 容器源码分析系列的文章,我特地写了一篇 Spring IOC 容器的导读文章.在导读一文中,我介绍了 Spring 的一些特性以及阅读 Spring 源码的一 ...

  3. eclipse代码提示javadoc背景为黑色框的解决办法

    我的eclipse是近期下载的oxygen版本.不知道怎么出现了一个这个问题,鼠标悬停指向代码时应该出现的代码提示解释框,全为黑色,看不到文字.如下图 经过验证,最终解决方法为window->G ...

  4. Linux学习笔记-基本操作1

    1>. 命令解析器2>. Linux快捷键3>. Linux 系统目录结构4>. 用户目录5>. 文件和目录操作6>. 文件和目录的属性7>. 文件权限, 用 ...

  5. ASP.NET Core WebApi 项目部署到 IIS 服务器的总结

    Point: - ASP.NET Core WebApi 项目 - 发布到 IIS 服务器 1. 选择 File System 2. 输入要发布到的路径 # 其它默认,直接发布 3. 打开 IIS,添 ...

  6. HTTP的请求报文与响应报文

    报文: 简单来说,报文就是也就是HTTP报文,作用是在各个系统之间进行和响应时用来交换与传输的数据单元,即站点一次性要发送的数据块,这些数据块以一些文本形式的元信息开头,这些信息描述了报文的内容及含义 ...

  7. javascript 计算文件MD5 浏览器 javascript读取文件内容

    原则上说,浏览器是一个不安全的环境.早期浏览器的内容是静态的,用户上网冲浪,一般就是拉取网页查看.后来,随着互联网的发展,浏览器提供了非常丰富的用户交互功能.从早期的表单交互,到现在的websocke ...

  8. C、C++打包成.dll .so .a 给Unity使用

    C.C++打包成.dll .so .a 给Unity使用 打包.dll库 工具:VS 使用VS新建项目 选择不大于.NET3.5的版本 选择Visual C++ -> Win32 控制台应用程序 ...

  9. Docker三剑客之常用命令

    一.docker-machine 命令 说明 docker-machine create 创建一个 Docker 主机(常用-d virtualbox) docker-machine ls 查看所有的 ...

  10. POJ 2546

    #include<iostream> #include<numeric> #include<iomanip> #include<algorithm> # ...