高德地图轨迹回放—动态数据

安卓端将经纬度传入数据库表中，后台获取经纬度点，前端页面展示。

后台代码

获取经纬度集合：

//sql取出 时间段内 某ID 的经纬度集合
    ArrayList<InitBean> list = getImange().getGpsHistList(id,startDate,EndDate);        

        if (list!=null && list.size()>0)
        {

               String lnglat = "";
// 遍历list 每个位置点用[]扩起来   逗号分隔
            for (int i = 0; i < list.size(); i++) {
                 lnglat += "["+list.get(i).getStart_longitude()+","+list.get(i).getStart_latitude()+"],";
            }
//截取最后一个逗号  将最终结果传递
            getResponse().getWriter().print("["+lnglat.substring(0,lnglat.length() - 1)+"]");

jsp页面代码

参考高德地图仅显示驶过线demo 将固定数据替换为后台获取的经纬度：

    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String id = request.getParameter("id");
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="zh-CN">

<head>
    <base href="//webapi.amap.com/ui/1.0/ui/misc/PathSimplifier/examples/" />
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>仅显示司机驶过线</title>
    <style>
    html,
    body,
    #container {
        width: 100%;
        height: 100%;
        margin: 0px;
    }

    #loadingTip {
        position: absolute;
        z-index: 9999;
        top: 0;
        left: 0;
        padding: 3px 10px;
        background: red;
        color: #fff;
        font-size: 14px;
    }
    </style>
</head>

<body>

    <div id="container"></div>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=19b347f243aa04c64622f8202177984f&plugin=AMap.Driving"></script>
     <!-- UI组件库 1.0 -->
    <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
    <script type="text/javascript">
    //创建地图
    var map = new AMap.Map('container', {
        zoom: 4
    });

    AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {

        if (!PathSimplifier.supportCanvas) {
            alert('当前环境不支持 Canvas！');
            return;
        }

        var emptyLineStyle = {
            lineWidth: 0,
            fillStyle: null,
            strokeStyle: null,
            borderStyle: null
        };

        var pathSimplifierIns = new PathSimplifier({
            zIndex: 100,
            //autoSetFitView:false,
            map: map, //所属的地图实例

            getPath: function(pathData, pathIndex) {

                return pathData.path;
            },
            getHoverTitle: function(pathData, pathIndex, pointIndex) {

                return null;
            },
            renderOptions: {
                //将点、线相关的style全部置emptyLineStyle
                pathLineStyle: emptyLineStyle,
                pathLineSelectedStyle: emptyLineStyle,
                pathLineHoverStyle: emptyLineStyle,
                keyPointStyle: emptyLineStyle,
                startPointStyle: emptyLineStyle,
                endPointStyle: emptyLineStyle,
                keyPointHoverStyle: emptyLineStyle,
                keyPointOnSelectedPathLineStyle: emptyLineStyle
            }
        });

        window.pathSimplifierIns = pathSimplifierIns;

           $.ajax({
            type : "post",
            async : false,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url : "<%=basePath%>querygpshist.action?method=gettgpsbydriverid&id=<%=id%>",
            dataType : "json",        //返回数据形式为json
            success : function(result) {
             //成功返回后台查询的经纬度点集合（注：格式为[[],[],[]]）
            //console.info(result);

       pathSimplifierIns.setData([{
         name: '测试',
         path:result  
        }]);

             }

        });

        function onload() {
            pathSimplifierIns.renderLater();
        }

        function onerror(e) {
            alert('图片加载失败！');
        }

        var navg1 = pathSimplifierIns.createPathNavigator(0, {
            loop: true,
            speed: 1000000,
            pathNavigatorStyle: {
                width: 24,
                height: 24,
                //使用图片
                content: PathSimplifier.Render.Canvas.getImageContent('./imgs/car.png', onload, onerror),
                strokeStyle: null,
                fillStyle: null,
                //经过路径的样式
                pathLinePassedStyle: {
                    lineWidth: 6,
                    strokeStyle: 'black',
                    dirArrowStyle: {
                        stepSpace: 15,
                        strokeStyle: 'red'
                    }
                }
            }
        });

        //对第一条线路（即索引 0）创建一个巡航器
        var navg1 = pathSimplifierIns.createPathNavigator(0, {
            loop: false, //循环播放
            speed: 1000000 //巡航速度，单位千米/小时
        });

        navg1.start();


    });
    </script>
</body>

</html>

注：高德地图 pathSimplifierIns.setData([{
name: ‘测试’,
path:result
}]);
path 格式为[[ ],[ ],[ ]]

高德地图轨迹回放----动态数据

高德地图轨迹回放—动态数据

后台代码

jsp页面代码

猜你喜欢