<!doctype html>
<head>
    <meta charset="utf-8">
    <!-- 强制以Chrome内核渲染页面（针对IE等浏览器的兼容设置） -->
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <!-- 配置视口：初始缩放1.0、禁止用户缩放、宽度适配设备宽度 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <style>
        /* 重置html、body和容器的样式：宽度高度100%、外边距0 */
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
            margin: 0px;
        }
         /* 加载提示框样式：绝对定位、层级9999、背景红色、白色文字等 */
        #loadingTip {
            position: absolute;
            z-index: 9999;
            top: 0;
            left: 0;
            padding: 3px 10px;
            background: red;
            color: #fff;
            font-size: 14px;
        }
    </style>
    <!-- 页面标题：运动轨迹 -->
    <title>运动轨迹</title>
</head>

<body>
<!-- 地图容器 -->
<div id="container"></div>
<!-- 引入高德地图JS API -->
<script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.4&key=9c89950bdfbcecd46f814309384655cd'></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
    });

    // 加载路径简化器（PathSimplifier）和jQuery类库
    AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function (PathSimplifier, $) {

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

        //just some colors
        var colors = [
            "#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00",
            "#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707",
            "#651067", "#329262", "#5574a6", "#3b3eac"
        ];
        // 初始化路径简化器实例
        var pathSimplifierIns = new PathSimplifier({
            zIndex: 100,
            //autoSetFitView:false,
            map: map, //所属的地图实例

            getPath: function (pathData, pathIndex) {

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

                if (pointIndex >= 0) {
                    //point
                    return pathData.name + '，点：' + pointIndex + '/' + pathData.path.length;
                }
                // hover 到轨迹线时，显示“名称, 点数量：总点数”
                return pathData.name + '，点数量' + pathData.path.length;
            },
            renderOptions: {
                pathLineStyle: {
                    dirArrowStyle: true
                },
                // 自定义路径样式（根据缩放级别和索引动态设置颜色、线宽）
                getPathStyle: function (pathItem, zoom) {

                    var color = colors[pathItem.pathIndex % colors.length],
                        lineWidth = Math.round(4 * Math.pow(1.1, zoom - 3));

                    return {
                        pathLineStyle: {
                            strokeStyle: color,
                            lineWidth: lineWidth
                        },
                        pathLineSelectedStyle: {
                            lineWidth: lineWidth + 2
                        },
                        pathNavigatorStyle: {
                            fillStyle: color
                        }
                    };
                }
            }
        });
        // 将路径简化器实例暴露到window，方便调试
        window.pathSimplifierIns = pathSimplifierIns;

        $('<div id="loadingTip">加载数据，请稍候...</div>').appendTo(document.body);
         // 从后端接口获取轨迹数据（带日期参数）
        $.getJSON('/owntracks/get_datas?date={{ date }}', function (d) {

            if (!d || !d.length) {
                $("#loadingTip").text("没有数据...")
                return;
            }
            $('#loadingTip').remove();
            pathSimplifierIns.setData(d);

            //initRoutesContainer(d);

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

            function onerror(e) {
                alert('图片加载失败！');
            }
            // 遍历每条轨迹，创建导航器并启动自动播放
            d.forEach(function (item, index) {
                var navg1 = pathSimplifierIns.createPathNavigator(index, {
                    loop: true,
                    speed: 1000,
                });

                navg1.start();
            })

        });
    });
</script>
</body>


</html>