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

最新推荐文章于 2022-08-08 18:43:51 发布

技术小牛牛

最新推荐文章于 2022-08-08 18:43:51 发布

阅读量7k

点赞数 5

分类专栏：百度地图文章标签：百度地图 ajax 地图百度地图API gps

本文链接：https://blog.csdn.net/jishuxiaoniuniu/article/details/74517004

版权

本文介绍如何利用百度地图API结合ajax获取GPS数据，实现在地图上展示车辆行驶路径。在实践中遇到多车显示问题，通过改变图标名称解决图标覆盖问题，欢迎交流学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过百度地图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元/天解锁文章