mui手机GPS轨迹查看

前端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("'", "\"");
}

mui手机GPS轨迹查看

推荐阅读更多精彩内容