实现GPS一辆或多辆小车在百度地图上显示驾驶路线

最新推荐文章于 2022-12-02 17:11:19 发布
最新推荐文章于 2022-12-02 17:11:19 发布
阅读量6.8k 收藏 36
点赞数 5
分类专栏： 百度地图 文章标签： 百度地图 ajax 地图 百度地图API gps
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jishuxiaoniuniu/article/details/74517004
版权

通过百度地图API实现一辆车或多辆车在地图上行驶，实现车辆监控，并显示驾驶路线。效果图如下：

 

 

 

本demo是通过ajax获取后台的经纬度，将经纬度传递给小车，小车不断移动，并调用百度地图API的画线函数，实现小车路线的显示。

部分代码如下：

 

 

 

<%@page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>得到GPS数据，画出车辆运行路线</title>

<style type="text/css">  
 	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}  
</style>  
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=h86KsPl6VGvedz2G3CGmR37Ah8oMUMcY"></script> 	
</head>

<body>
	<a href="RoadBook.jsp"><button>路书规划</button></a>
	<a href="PolesStations.jsp"><button>选择充电站</button></a>
	<input type="button" onclick="stop()" value="停止">
	<input type="button" onclick="lngLatAjax()" value="继续">
	<a href="Price.jsp"><button>实时定价</button></a>
	<div id="allmap"></div>
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
    var moment="2016-01-01 08:24:06";   //通过向后台传递时间，得到改时间的经纬度
    var moment1="2016-01-01 12:24:06";
    var startLng;
    var startLat;
    var endLng;
    var endLat; 
    var startLng1;
最低0.47元/天 解锁文章
技术小牛牛
关注
  • 5
    点赞
  • 踩
  • 36
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
js百度地图小车html,对百度地图js-api多车辆的路线显示及点击显示信息的总结
weixin_35796523的博客
06-25 629
总结一下最近研究百度地图的一些成果，针对物流路线的自定义复杂覆盖物的写法。获取密钥、初始化百度地图这些基本的在这里就不讲了，详细的参考百度地图官方文档。这里会详细介绍：自定义车辆图标并在当前位置上标注；点击车辆图标绘制车辆的规划路线(已走过的和未走过的用不同颜色标注)和各个状态点的状态信息；定义自定义覆盖物；点击状态点切换显示、隐藏提示信息；自动调整最佳视野先上效果图初始化显示车辆当前位置1.jp...
利用百度地图API实现在地图车辆的平滑移动，轨迹回放，多台车辆同时平滑移动
07-12
利用百度地图API实现在地图车辆的平滑移动，轨迹回放，多台车辆同时平滑移动
百度地图 多车GPS实时监控
zhounanboa的专栏
08-30 2607
多车监控时 infowindows不好控制 搞了很长时间 终于纠正了bug //左边树 var menuTree; //地图 var map; //淡出框1 var dlg_Edit1; //淡出框2 var dlg_Edit2; //marker下红色框 var label; //定时器 var interval; //searchInfoWindo
百度地图根据经纬度坐标，显示汽车行驶轨迹
qq_36865945的博客
08-06 2419
继上一篇：百度地图根据经纬度坐标，显示轨迹又进行了些许优化。将固定点为变为汽车行驶轨迹并添加点位。 上一篇链接：https://blog.csdn.net/qq_36865945/article/details/107356608 将 改为 后台代码没变动，主要为前端JS代码变动： 首先初始化时searchTrackmaps（）； 然后对应的 function searchTrackmaps(vehiclePassTime,cphData) { //查询基础数据 $...
用百度地图使一辆汽车正常行驶
ydq402的专栏
12-06 182
[code="java"] 点沿直线运动 var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 15); var myP1 = new BMap.Point(116.380967, 39...
百度地图实现小车规划路线后平滑移动功能
08-25
"百度地图实现小车规划路线后平滑移动功能" 本文主要介绍了百度地图实现小车规划路线后平滑移动功能的实现方法。通过使用百度地图提供的API和工具类，可以实现小车规划路线后平滑移动的功能。 知识点1：百度地图...
类似滴滴打车，多辆小车在地图上平滑移动的实现，基于百度地图实现（轨迹已画好和无轨迹）
11-12
在Android开发中，实现类似滴滴打车应用的功能，即在地图上显示多个小车并让它们平滑移动，是一项常见的需求。本项目基于百度地图API，提供了完整的源码实现，包括车辆已有轨迹和无轨迹两种情况。下面我们将深入探讨...
获取GPS定位信息，并通过百度地图显示位置
11-18 2万+
flash，flex进行安卓或ios移动开发的时候，使用flash.sensors.Geolocation类，可以利用设备地理位置传感器获取GPS信息，可以获取的具体信息如下： 1，经度 2，纬度 3，高度 4，水平精度(米) 5，垂直精度(米) 6，速度 7，时间  下面是一个GPS定位系统的demo，可以定时获取位置信息，同时使用百度地图的API实时的在地图上显示位置。  效
百度地图开发：调用jsAPI实现实时定位的解决方案及常见问题
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
10-27 2882
项目说明 建议使用异步加载，避免F12控制台出现阻塞等提示； 电脑使用浏览器定位时，由于没有GPS，会出现无法定位(fail8)等错误提示，属于正常； 手机端时候，尤其是华为系列（安卓系统）无法正常定位时，一般是因为没有使用https安全服务协议访问的，解决方案就是配置SSL证书； 定位无法实时展示，只能通过定位配置项进行设置（见下文）； 对生活区（行政街道等）的定位相对精准，但是在荒山野岭时，定位的偏差会很大（无法用具体数字来描述） 异步加载地图 /*百度地图经纬度选择插件*/ func.
利用百度地图开源代码实现定位和实时路径跟踪
LX__Mr的博客
08-10 5089
利用百度地图开源代码实现定位和实时路径跟踪 这段时间需要用Android Studio做一个基于百度地图的app，记录一下过程，主要实现了定位和实时路径跟踪。 先演示一下效果：（视频放不了，图片凑凑数） 实时路径的思想和步骤： 思想：如果需要在地图上实现实时跟踪，那么首先就需要实现定位功能，在实现了定位功能的基础上，需要在地图上画出行走轨迹，那么如何画出行走轨迹？就需要实时地记录行走的经纬度，两点之间画一条直线，中间设置定位的频率高的话，那么记录的经纬度就越多，这样就可以让记录的行走路径光滑一些。 如
百度地图控件demo,根据GPS实时显示
04-04
基于百度地图控件，并通过JAVA代码实现位置打点。可进一步二次开发
可定位显示轨迹地图（基于百度地图）源代码
10-26
学第一行代码时根据例程改的，实现了定位功能，又看了大量博客，实现了实时显示轨迹的功能，用的是百度地图提供的sdk。
百度地图java_160518、java中使用百度地图（超级简单）
weixin_39664431的博客
02-12 226
第一步：导入如下内容，红色的部分需要申请(个人通过手机号就可以申请)第二步：写下面的js// 百度地图API功能var map = new BMap.Map("allmap");var point = new BMap.Point(120.161773,30.279131);map.centerAndZoom(point,7);//放到的倍数// 创建地址解析器实例var myGeo = new ...
JS 百度地图API 实现多车同时平滑移动及转向
weixin_42252416的博客
08-08 737
根据百度地图API实现小车平滑移动及转向
百度地图从后台获取实时坐标点以实现车辆实时跟踪
热门推荐
sning999
01-31 3万+
要想实现车辆实时跟踪，就必须实时获取车辆的坐标点，然后展示在百度地图上。而实现实时获取车辆坐标点的功能，有两个方案：方案①定义一个函数getCars()，此函数的功能是通过ajax访问后台接口，从而返回车辆的实时位置信息。然后利用setInterval() 方法，每隔2000毫秒（根据业务需求确定）就调用一次获取车辆实时位置信息的函数； 方案②：定义一个获取车辆实时位置信息的函数getCars
vue2+百度离线地图实现多车辆行驶动态轨迹
weixin_39277183的博客
12-02 3952
有个缺点就是如果数据量庞大会导致浏览器性能消耗严重，因为这里使用了定时器实现，应该有更好的办法实现，完成改功能效果需要连个接口，①初始化坐标点接口，②增量坐标点接口。实现多车辆实时轨迹监控，每个10秒监测一次接口，进行动态追加。vue2+百度离线地图实现行驶车辆动态轨迹。
百度地图API显示车辆运行轨迹并动画展示
qq_41726230的博客
06-01 9027
百度地图API显示车辆运行轨迹并动画展示
利用百度地图的路书功能实现汽车实时定位
冰咖啡的专栏
05-25 1万+
最近公司做的一个app项目需要用到百度地图实时定位功能，app项目是用ionic做的，所以用的也是百度地图web版。具体需要实现的功能类似于导航的时候有个小车在地图上随着实时位置移动，本功能不需要导航，只需要小车在地图上移动。 那么具体怎么实现这个功能呢？首先看一下百度地图官方api，并没有现成的实时定位移动功能，只提供一个单点沿线运动的功能，尝试后发现该功能勉强用，但是还不够完美，最重要的是小...
vue.js 高德地图多辆小车移动
最新发布
07-17
要实现多辆小车在高德地图上移动，可以使用 Vue.js 结合高德地图 JavaScript API，为每辆小车创建一个独立的标记，并对每个标记进行移动操作。 以下是一个示例代码： ```html <template> <div> <div id="map" style="width: 800px; height: 600px;"></div> </div> </template> <script> export default { data() { return { map: null, markers: [ { id: 1, lnglat: [116.39, 39.9] }, { id: 2, lnglat: [116.4, 39.91] }, { id: 3, lnglat: [116.41, 39.92] }, // ... ] }; }, mounted() { // 创建地图 this.map = new AMap.Map('map', { zoom: 15, center: [116.39, 39.9] }); // 创建小车标记 this.markers.forEach(markerData => { const marker = new AMap.Marker({ map: this.map, position: markerData.lnglat, icon: new AMap.Icon({ size: new AMap.Size(50, 50), image: 'https://webapi.amap.com/images/car.png', imageSize: new AMap.Size(50, 50) }) }); // 设置小车标记的角度 function setMarkerAngle(angle) { marker.setAngle(angle); } // 设置小车标记的位置 function setMarkerPosition(position) { marker.setPosition(position); } // 获取小车标记的角度 function getAngle(position) { // 根据当前位置和下一个位置计算角度 // ... } // 小车移动的动画 function move() { let index = 0; setInterval(() => { const currentPosition = markerData.lnglat; const nextPosition = this.markers[index].lnglat; const angle = getAngle(currentPosition, nextPosition); setMarkerAngle(angle); setMarkerPosition(nextPosition); index++; if (index >= this.markers.length) { index = 0; } }, 1000); } // 开始小车移动 move(); }); } } </script> ``` 在上述代码中，通过遍历 `markers` 数组为每辆小车创建一个独立的标记，并在 `mounted` 钩子函数中循环地对每个标记进行移动操作。你可以根据实际需求修改标记的初始位置、路径、移动速度等参数。记得在 `mounted` 钩子函数中调用相关方法来初始化地图和小车移动。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值