美文网首页
mui手机GPS轨迹查看

mui手机GPS轨迹查看

作者: dopaclover | 来源:发表于2017-09-26 14:16 被阅读0次

前端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轨迹查看

    前端mui代码: #allmap{width: 100%;heig...

  • mui 手机端GPS 轨迹实现方式

    1.方式一 1>mui端将手机gps定位经纬度定时传给后台 2>后台接收数据保存到数据库,并将定时获取的数据发给前...

  • mui手机GPS实时导航

    前端实时导航代码: #allmap{width: 100%;h...

  • GPS轨迹记录器:myTracks

    myTracks mac版是Macos上一款GPS轨迹记录器, 主要记录GPS轨迹,实时统计用户在远足、骑车、跑步...

  • 轨迹去噪

    1. 定义 轨迹去噪:过滤掉轨迹中不需要的GPS点,保留需要的GPS点,然后组成新的子轨迹。 2. 算法描述 情况...

  • 浅尝MUI-序

    初探MUI MUI是一个HTML5前端框架,主要用于手机APP开发。附MUI官方文档。以下内容均围绕MUI进行讨论...

  • 轨迹分段

    1. 定义 轨迹分段:对去噪后的轨迹,根据驻留点信息或者相邻GPS点之间的时间间隔,将其划分成多个连续的GPS子序...

  • 安信可(Ai-Thinker)A9/A9G GPRS模块内部集成

    功能说明 实现手机可以实时查看定位器(A9/A9G模块)位置。 定位器可以使用GPS定位,如果GPS无法定位或者A...

  • 徒步驴友入门教程_香巴拉穿越线

    户外gps轨迹记录 六只脚 路线记录 分享 ...

  • 地图GPS轨迹录制

    前言 在地图的使用中,尤其在导航场景下,进行GPS轨迹录制是十分必要并且有用的,本文会对于安卓系统下的轨迹录制部分...

网友评论

      本文标题:mui手机GPS轨迹查看

      本文链接:https://www.haomeiwen.com/subject/slpsextx.html