百度鹰眼轨迹后台的移植

        先来介绍下百度鹰眼轨迹吧。百度鹰眼轨迹是百度2016年开放的接口，完全免费。可实现一年内的轨迹的实时查询、当前位置查询以及驾驶行为等，给物流类的项目提供了极大的帮助。笔者在移植百度鹰眼轨迹后台时，一直苦于没有很好的社区支持，踩了很多坑，本着分享的理念，遂书此文。

        首先，可以去百度官网论坛下载鹰眼轨迹后台的源码文件，这里贴上链接demo2.1，下载解压后打开demo.js，这是主逻辑所在。其他不说，按照readme里面所说的来，将你的ak和severce_id替换为你自己的。这个demo是使用了require.js框架，作为一名后端，看起来着实头疼。简单说一下，就是js的模块化变成，封装性很强，具体问搜索引擎。笔者最开始的想法是改模块里的方法，结果碰了一鼻子灰，加载了十来个js文件，实在没那工夫去研究，pm又追得及，只能放弃这条路。闲话不说，下面干货。

        demo的大概900行有个$(document)加载事件

$(document).ready(function () {
    var myTrack = $('#track').val();
    //加载轨迹
    myTrack = eval(myTrack)
    for (var i=0; i<myTrack.length; i++)
    {
        var entity_name = myTrack[i]['entity_name'];
        var li = $(this);
        var start_time = Util.js_strto_time(myTrack[i]['start_time']);
        var end_time = Util.js_strto_time(myTrack[i]['end_time']);
        me.selectTrack_2(entity_name, entity_name, $());
        var track = selectedTracks_2[entity_name];
        var formatHistoryPoints = function (res) {
            var points = res.points;
            var poidata = [];
            var temp;
            for (var i = 0, l = points.length; i < l; i++) {
                temp = points[i].location.concat(points[i].loc_time);
                poidata.push(temp);
            }
            res.pois = poidata;
            return res;
        };
        if (track) {
            var cbks = {
                success: function (res) {
                    res = formatHistoryPoints(res);
                    var entity_name = res.entity_name;

                    selectedTracks_2[entity_name].pois = res.pois;

                    // 无数据
                    selectedTracks_2[entity_name].colors[10] = _colors[entity_name];
                    selectedTracks_2[entity_name].initTravels();
                    selectedTracks_2[entity_name].drawTravels({
                        pt: true
                    });
                    var activeTime = selectedTracks_2[entity_name].activeTime;
                    if (activeTime == 0) {
                        li.find('.pro-bar').css('width', '0px');
                    } else if (activeTime <= 1 * 60 * 60) {
                        li.find('.pro-bar').css('width', '10px');
                    } else if ((activeTime > 1 * 60 * 60) && (activeTime <= 2 * 60 * 60)) {
                        li.find('.pro-bar').css('width', '20px');
                    } else if ((activeTime > 2 * 60 * 60) && (activeTime <= 3 * 60 * 60)) {
                        li.find('.pro-bar').css('width', '30px');
                    } else if ((activeTime > 3 * 60 * 60) && (activeTime <= 4 * 60 * 60)) {
                        li.find('.pro-bar').css('width', '40px');
                    } else if ((activeTime > 4 * 60 * 60) && (activeTime <= 5 * 60 * 60)) {
                        li.find('.pro-bar').css('width', '50px');
                    } else if ((activeTime > 5 * 60 * 60) && (activeTime <= 6 * 60 * 60)) {
                        li.find('.pro-bar').css('width', '60px');
                    } else if ((activeTime > 6 * 60 * 60) && (activeTime <= 7 * 60 * 60)) {
                        li.find('.pro-bar').css('width', '70px');
                    } else if ((activeTime > 7 * 60 * 60) && (activeTime <= 8 * 60 * 60)) {
                        li.find('.pro-bar').css('width', '80px');
                    } else if ((activeTime > 8 * 60 * 60) && (activeTime <= 9 * 60 * 60)) {
                        li.find('.pro-bar').css('width', '90px');
                    } else if ((activeTime > 9 * 60 * 60) && (activeTime <= 10 * 60 * 60)) {
                        li.find('.pro-bar').css('width', '100px');
                    } else if (activeTime > 10 * 60 * 60) {
                        li.find('.pro-bar').css('width', '110px');
                    }

                    //selectedTracks_2[entity_name].setViewMap();

                },
                before: function () {

                },
                after: function () {

                }
            }
            trackModule.loadTrackHistory(track, start_time, end_time, cbks, 1, '', curIndex);
        }
        selTrack = track;
    }
    return false;
});

loadTrackHistory()方法就是加载历史轨迹的入口。代码里笔者已对其就行了加工处理，可以根据自己的需求加载多条轨迹，而不像原生中必须的通过时间条和左上角的list来出发轨迹的加载。至此，你就可以灵活的根据自身的需求加载不同对象不同时间段的轨迹了。

        如有其他问题欢迎随时留言！！！

转载于:https://my.oschina.net/u/3065563/blog/800874