百度地图API-动态运行画面

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Track</title>
        <style type="text/css">
            html{height:100%}
            body{height:100%;margin:0px;padding:0px}
            #controller{width:100%; border-bottom:3px outset; height:50px; line-height: 50px; filter:alpha(Opacity=100); -moz-opacity:1; opacity:1; z-index:10000; background-color:lightblue;}
            #container{height:100%}
            .btn {
                background-color: green;
                color: white;
                display: inline-block;
                padding: 5px 12px;
                margin-bottom: 0;
                font-family: inherit;
                font-size: 13px;
                font-weight: 400;
                line-height: 1.53846154;
                text-align: center;
                white-space: nowrap;
                vertical-align: middle;
                cursor: pointer;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                background-image: none;
                border: 1px solid transparent;
                border-radius: 4px;
                -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);
                box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);
                -webkit-transition: all .8s cubic-bezier(.175,.885,.32,1);
                -o-transition: all .8s cubic-bezier(.175,.885,.32,1);
                transition: all .8s cubic-bezier(.175,.885,.32,1);
            }
            .btn:disabled {
                background-color: grey;
            }
            a.btn {
                text-decoration: none;
                background: #8BCB25;
            }
        </style>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xxx"></script>
        <?php
        $trackJson = CJavaScript::jsonEncode($trackArr);
        ?>
        <script type="text/javascript">
            //解析数组
            var trackJsonObj = $.parseJSON('<?php echo $trackJson;?>');
            var len = trackJsonObj.length;
            var points=[];
            $.each(trackJsonObj , function(index , obj) {
                var point = new BMap.Point(obj.lng,obj.lat);
                points.push(point);
            });

            var map; //百度地图对象
            var car; //汽车图标
            var label; //信息标签
            var centerPoint;

            var timer; //定时器
            var index = 0; //记录播放到第几个point

            var followChk, playBtn, pauseBtn, resetBtn; //几个控制按钮

            function init() {
                followChk = document.getElementById("follow");
                playBtn = document.getElementById("play");
                pauseBtn = document.getElementById("pause");
                resetBtn = document.getElementById("reset");

                //初始化地图,选取第一个点为起始点
                map = new BMap.Map("container");
                map.centerAndZoom(points[0], 16);
                map.enableScrollWheelZoom();
                map.addControl(new BMap.NavigationControl());
                map.addControl(new BMap.ScaleControl());
                map.addControl(new BMap.OverviewMapControl({isOpen: true}));
                var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/Mario.png", new BMap.Size(32, 70), {    //小车图片
                    offset: new BMap.Size(0, -5),    //相当于CSS精灵
                    imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。
                });
                //通过DrivingRoute获取一条路线的point
                var driving = new BMap.DrivingRoute(map);
                driving.search(points[0],points[len-1]);
                driving.setSearchCompleteCallback(function () {
                    //得到路线上的所有point
//                    points = driving.getResults().getPlan(0).getRoute(0).getPath();
//                    //画面移动到起点和终点的中间
                    centerPoint = new BMap.Point((points[0].lng + points[points.length - 1].lng) / 2, (points[0].lat + points[points.length - 1].lat) / 2);
                    for(var i=0 , len=points.length ; i < len ; i++) {
                        var marker = new BMap.Marker(points[i]);
                        marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
                        map.addOverlay(marker);
                    }
                    map.panTo(centerPoint);
                    //连接所有点
                    map.addOverlay(new BMap.Polyline(points, {strokeColor: "black", strokeWeight: 5, strokeOpacity: 1}));

                    //显示小车子
                    label = new BMap.Label("", {offset: new BMap.Size(-20, -20)});
                    car = new BMap.Marker(points[0],{icon:myIcon});
                    car.setLabel(label);
                    map.addOverlay(car);

                    //点亮操作按钮
                    playBtn.disabled = false;
                    resetBtn.disabled = false;
                });
            }

            function play() {
                playBtn.disabled = true;
                pauseBtn.disabled = false;

                var point = points[index];
                if (index > 0) {
                    map.addOverlay(new BMap.Polyline([points[index - 1], point], {strokeColor: "red", strokeWeight: 1, strokeOpacity: 1}));
                }
                label.setContent("经度: " + point.lng + "<br>纬度: " + point.lat + "<br/>生成时间:"+trackJsonObj[index].create_time);
                car.setPosition(point);
                index++;
                if (followChk.checked) {
                    map.panTo(point);
                }
                if (index < points.length) {
                    timer = window.setTimeout("play(" + index + ")", 600);
                } else {
                    playBtn.disabled = true;
                    pauseBtn.disabled = true;
                    map.panTo(point);
                }
            }

            function pause() {
                playBtn.disabled = false;
                pauseBtn.disabled = true;

                if (timer) {
                    window.clearTimeout(timer);
                }
            }

            function reset() {
                followChk.checked = false;
                playBtn.disabled = false;
                pauseBtn.disabled = true;

                if (timer) {
                    window.clearTimeout(timer);
                }
                index = 0;
                car.setPosition(points[0]);
                map.panTo(centerPoint);
            }
        </script>
    </head>

    <body onload="init();">
        <div id="controller" align="center">
            <input id="follow" type="checkbox"><span style="font-size:12px;">画面跟随</span></input>
            <input id="play" type="button" value="播放" onclick="play();" class="btn btn-edc-reset" disabled />
            <input id="pause" type="button" value="暂停" onclick="pause();" class="btn btn-edc-reset" disabled />
            <input id="reset" type="button" value="重置" onclick="reset()" class="btn btn-edc-reset" disabled />
            <?php echo CHtml::link("返回",array("/userCenter/taskmonitoring/sa/view" , 'id'=>$tid), array('class'=>'btn'));?>
        </div>
        <div id="container"></div>
    </body>
</html>

  百度地图API-动态运行画面_第1张图片

 

你可能感兴趣的:(百度地图API-动态运行画面)