master

分支 (1)

管理

管理

master

maptrack
/
index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=DGIiYtKy4R44pbZA4nf9Xwk2"></script>
    <script type="text/javascript" src="./js/coordTransform.js"></script>
    <script type="text/javascript" src="./js/data.js"></script>
    <script type="text/javascript" src="./js/component/util.js"></script>
    <script type="text/javascript" src="./js/component/listener.js"></script>
    <script type="text/javascript" src="./js/component/baseTrack.js"></script>
    <script type="text/javascript" src="./js/component/trackPlayer.js"></script>
    <script type="text/javascript" src="./js/component/baiduTrack.js"></script>

    <style type="text/css">
        html,
        body,
        .content,
        #mapContainer {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .content {
            position: relative;
        }

        #mapContainer {
            left: 0;
            right: 0;
            top: 0;
            position: absolute;
            z-index: 10;
        }

        #rightPanel {
            right: 0;
            top: 100px;
            height: 300px;
            width: 200px;
            position: absolute;
            z-index: 100;
            background: rgba(186, 200, 211, 0.6);
        }
    </style>
</head>

<body>

    <div class="content">
        <div id="mapContainer">
        </div>
        <div id="rightPanel">
            <p>
                速率：
                <select id="cmpSpeed">
                <option value="300" selected="selected">1X</option>
                <option value="200">2X</option>
                <option value="100">3X</option>
            </select>
                <input id="userTrack" data-uid="2928" type="button" value="轨迹回放" /><br/>
                <input id="stopBtn" type="button" value="停止播放" />
            </p>
            <p style="font-size:12px;">
                单击“播放中”，将切换到暂停，再单击将继续之前的进度播放！如果想彻底停止，请单击停止播放按钮<br/>
            </p>
        </div>
    </div>

    <script type="text/javascript">
        var map = new BMap.Map("mapContainer"); // 创建Map实例
        map.centerAndZoom("深圳市龙华新区", 13);
        map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
        map.setCurrentCity("深圳"); // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

        //实例化播放器实例
        var player = legendofkage.TrackPlayer();

        setDataSource = function() {

            datasource.ListTL.forEach(function(item, index) {
                var bdTrack = new legendofkage.BaiduTrack(map, {
                    dataSource: item,
                    autoAdjustViewport: true,
                    speed: 200,
                    calcDistance: true,
                    personMarker: {
                        label: {
                            text: 'testuser'
                        }
                    }
                });
                //注册轨迹的单击事件，截获marker的事件
                bdTrack.addEventListener('click', function(e) {
                    console.log(e);
                    alert(JSON.stringify(e));
                })
                player.addTrack(bdTrack);
            });


            var c = coordtransform;
            var tracks = player.getTrack();
            tracks.forEach(function(item) {
                item.dataAdapter(function(target, from) {
                    var lnglat = coordtransform.bd_mkt2bd_wgs(from.BdX, from.BdY);
                    target.point = new BMap.Point(lnglat[0], lnglat[1]);
                    target.date = from.Date;
                    target.dateString = from.DateString;
                    return target;
                });
            })
        }

        document.getElementById('cmpSpeed').addEventListener('change', function() {
            player.setPlaySpeed(this.value);
        })

        document.getElementById('userTrack').addEventListener('click', function() {
            if (player.getTrack().length == 0) {
                setDataSource();
            }
            if (player.getState() != "playing") {
                player.play();
            } else if (player.getState() == "playing")
                player.pause();
        })

        document.getElementById('stopBtn').addEventListener('click', function() {
            player.stop();
        })
    </script>


</body>

</html>