mui手机GPS轨迹查看
2017-09-26 本文已影响0人
dopaclover
前端mui代码：
<!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>
<style>
#allmap{width: 100%;height: 500px;}
</style>
<script src="js/appConfig.js"></script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">轨迹查询</h1>
</header>
<div class="mui-content">
<div id="allmap"></div>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
var map;
var arr;
mui.init();
mui.plusReady(function(){
map = new BMap.Map("allmap"); //创建地图
getGPSGJ();
});
function getGPSGJ(){
mui.ajax(GET_GPSGJ,{
dataType: 'text',
type:'post',
success:function(data){
var jsonArr=JSON.parse(data);
arr=getarr(jsonArr);
var p=Math.ceil(arr.length/2);
//设置地图中心点为数组的中点
map.centerAndZoom(new BMap.Point(arr[p].lng,arr[p].lat),13);
//添加起点和终点标签
addMarker(new BMap.Point(arr[0].lng,arr[0].lat),"起点");
addMarker(new BMap.Point(arr[arr.length-1].lng,arr[arr.length-1].lat),"终点");
//将后台读取到的GPS点信息，全部存储为百度的BMap.Point坐标点对象并用数组装起来
var arrPois = [];
for(var i=0;i<arr.length;i++){
arrPois.push(new BMap.Point(arr[i].lng,arr[i].lat));
}
//创建路线
var polyline=new BMap.Polyline(
arrPois,//所有gps坐标
{
strokeColor : "#009933", //线路颜色
strokeWeight : 4,//线路大小
//线路类型(实线)
strokeStyle : "solid"
});
map.addOverlay(polyline);
}
})
}
function addMarker(point,name){
var marker = new BMap.Marker(point);
var label = new BMap.Label(name, {
offset : new BMap.Size(20, -10)
});
marker.setLabel(label);
map.addOverlay(marker);
}
function getarr(json){
var arr=new Array();
for(var item in json){
arr.push(json[item]);
}
return arr;
}
</script>
</body>
</html>
后台代码（注：后台用的是公司框架）：
controll层:
@RequestMapping({"/feiwe_dirver_get_gpsgj.do"})
public void dirverGetGpsgj( HttpServletRequest request, HttpServletResponse response, ModelMap model) throws Exception {
response.getWriter().println(dWDirverService.dirverGetGpsgj(request));
}
serverce层:
public String dirverGetGpsgj(HttpServletRequest request);
serverceimpl层:
@Override
public String dirverGetGpsgj(HttpServletRequest request) {
BaseDao dao4S = this.getDao(SYS);
String sql="select * from Trajectory";
List<Trajectory> lt = dao4S.getListBySql(sql, Trajectory.class);
StringBuffer sb = new StringBuffer();
sb.append("[");
Trajectory bean;
for (int i = 0; i < lt.size(); i++) {
bean = lt.get(i);
if (i != 0) {
sb.append(",");
}
sb.append("{'lng':" + bean.getLng() +",");
sb.append("'lat':" + bean.getLat() + "}");
}
sb.append("]");
String t = sb.toString();
return t.replaceAll("'", "\"");
}
