前端实时导航代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=aGf0sLjv7DOonc61fINdATGez2d3O8xB"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
<style>
#allmap{width: 100%;height: 300px;}
#begin{margin-left:30%;margin-right:30%;}
</style>
<script src="js/appConfig.js"></script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">mui gsp定位</h1>
</header>
<div class="mui-content">
<div id="allmap">
地图加载中...
</div>
<input type="text" value="起点" id="start"/>
<input type="text" value="终点" id="end"/>
<input type="button" value="开始行程" id="begin"/>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
var lng;
var lat;
var car;
//存储实时gps定位坐标，用于查询实时轨迹
var arr=new Array();
var map;
mui.init();
//页面初始化gps定位，并将定位点作为地图中心
mui.plusReady(function(){
map = new BMap.Map("allmap"); //创建地图
getGPS();
});
//获取当前gps定位信息
function getGPS(){
//需要在mui框架的manifest.json文件中添加Geolocation位置信息模块 plus.geolocation.getCurrentPosition(translatePoint,function(e){
mui.toast("异常:" + e.message);
});
}
function translatePoint(position){
var currentLon = position.coords.longitude;
var currentLat = position.coords.latitude;
var gpsPoint = new BMap.Point(currentLon,currentLat);
BMap.Convertor.translate(gpsPoint,2,initMap); //坐标转换
}
function initMap(point){
//清除上一次的gps定位图标
map.removeOverlay(car);
lat=point.lat;
lng=point.lng;
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.centerAndZoom(point,15);
var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/car.png", new BMap.Size(300,157));
car = new BMap.Marker(point,{icon:myIcon})
map.addOverlay(car);
sendGPS();
}
//建立起点自动完成的对象
var st = new BMap.Autocomplete(
{
"input": "start",
"location": map
});
//建立终点自动完成的对象
var st = new BMap.Autocomplete(
{
"input": "end",
"location": map
});
//点击开始行程 document.getElementById("begin").addEventListener("tap",function(){
var p1=document.getElementById("start").value;
var p2=document.getElementById("end").value;
var driving = new BMap.DrivingRoute(map, {renderOptions: {map: map}});
driving.search(p1,p2);
//定时gps定位，并将数据发给后端存储
var t=self.setInterval('getGPS();',5000);
})
//发送gps定位信息到后端
function sendGPS(){
mui.ajax(GET_GPS,{
data:{
lat:lat,
lng:lng,
random: Math.floor(999999999)
},
dataType: 'text',
type:'post',
crossDomain: true,
success:function(data){
var jsonarr=JSON.parse(data);
alert(jsonarr.msg);
}
})
}
</script>
</body>
</html>
后台代码（注：后台用的是公司框架）：
controll层:
@RequestMapping({"/feiwe_dirver_get_gps.do"})
public void dirverGetGps( HttpServletRequest request, HttpServletResponse response, ModelMap model) throws Exception {
response.getWriter().println(dWDirverService.dirverGetGps(request));
}
serverce层:
public String dirverGetGps(HttpServletRequest request);
serverceimpl层:
@Override
public String dirverGetGps(HttpServletRequest request) {
BaseDao dao4S = this.getDao(SYS);
System.out.println("baga");
String lng=request.getParameter("lng");
String lat=request.getParameter("lat");
JSONObject json=new JSONObject();
Trajectory tra=new Trajectory();
if(!StringUtils.isEmpty(lng)&&!StringUtils.isEmpty(lat)){
//保存到数据做备份，以备之后轨迹回放接口调用
tra.setLat(Double.parseDouble(lat));
tra.setLng(Double.parseDouble(lng));
dao4S.save(tra);
json.put("msg", "ok");
}else{
json.put("msg", "no");
}
return json.toString();
}
网友评论