mui手机GPS实时导航

前端实时导航代码:
<!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();
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,012评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,628评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,653评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,485评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,574评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,590评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,596评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,340评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,794评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,102评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,276评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,940评论 5 339
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,583评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,201评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,441评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,173评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,136评论 2 352

推荐阅读更多精彩内容

  • 前端mui代码:<!doctype html> #allmap{width: 100%;heig...
    dopaclover阅读 1,131评论 1 0
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,617评论 18 399
  • 1、不安全的随机数生成,在CSRF TOKEN生成、password reset token生成等,会造成toke...
    nightmare丿阅读 3,691评论 0 1
  • Spring mvc 框架 DispatcherServlet前端控制器 ---- 整个流程控制的中心,由它调用其...
    蕊er阅读 696评论 0 0
  • 同读一本书《沟通的艺术》 2016-10-19-76 正文:就如疾病,疲劳的因素也可能影响你与人的关系,可能因疲劳...
    杨健effort阅读 338评论 0 0