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

实现思路：

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. @requestParamore与@pathvariable的区别

    http://localhost:8080/Springmvc/user/page.do?pageSize=3&pageNow=2 你可以把这地址分开理解,其中问号前半部分:http://lo ...

  2. 聊聊如何设计千万级吞吐量的.Net Core网络通信！

    聊聊如何设计千万级吞吐量的.Net Core网络通信! 作者:大石头 时间:2018-10-26 晚上 20:00 地点:QQ群-1600800 内容:网络通信, 网络库使用方式 网络库设计理念,高性 ...

  3. FFmpeg的安装与使用

    1.概述 FFmpeg是一套可以用来记录.转换数字音频.视频,并能将其转化为流的开源计算机程序.采用LGPL或GPL许可证.它提供了录制.转换以及流化音视频的完整解决方案.它包含了非常先进的音频/视频 ...

  4. Android .9 图片

    最初对 .9 图片不是十分理解,一些教程让人摸不到头脑. 最近重新研究终于明白了它的原理. 其实最重要的一点记住就可以了,就是 .9 图片的四条黑边的意义,每条黑边的意义都不一样: 顶部:在水平拉伸的 ...

  5. 【文文殿下】[AH2017/HNOI2017]礼物

    题解 二项式展开,然后暴力FFT就好了.会发现有一个卷积与c无关,我们找一个最小的项就行了. Tips:记得要倍长其中一个数组,防止FFT出锅 代码如下: #include<bits/stdc+ ...

  6. [SDOI2011]消耗战(虚树+树形动规）

    虚树dp 虚树的主要思想: 不遍历没用的的节点以及没用的子树,从而使复杂度降低到\(\sum\limits k\)(k为询问的节点的总数). 所以怎么办: 只把询问节点和其LCA放入询问的数组中. 1 ...

  7. solr 5.5使用 和pyg里 的4.10.3版 部署到tomcat中不一样（不使用内置jetty）

    http://www.cnblogs.com/zhuxiaojie/p/5764680.html

  8. POJ 2501

    #include<iostream> #include<iomanip> #include<stdio.h> #include<string> #inc ...

  9. Java实现二分法排序

    二分法:(二分法不是只能做数组,这里的数组只是为了举例) 在给出的有序排列的数组中,把目标值和数组中间值进行比较,如果相等,则返回中间值下标,如果目标值小于中间值,就从数组的前半段再次执行二分法查找, ...

  10. Ubuntu安装Gogs服务

    花了半天的时间把阿里云的centos 换成了ubuntu 14.04 lts ,原因是因为我想安装个gogs git服务,但是centos的glibc版本太低,折腾了半天没有成功. 迁移Ghost数据 ...