百度地图多个坐标连成轨迹

背景:平时app端上传时会由于各种原因,上传的坐标点可能不是完整的。
解决方案:两两坐标点建立连接,最终组成一个完整的轨迹!
参考:
http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html (js api)
http://lbsyun.baidu.com/jsdemo.htm#i5_2 (主要原理)
http://www.cnblogs.com/wujy/p/3897501.html (这位兄弟写的好详细,主要参考他这边的 )

var data = [
    [119.307268,26.087294],
    [119.300908,26.085607],
    [119.299399,26.089598],
    [119.305363,26.092161]
    ];

// 根据轨迹点,两两连线,最终合成一条完整的轨迹
function showMap() {
    var abc = $(data);
    var chartData = [];
    $.each(abc, function (item, value) {
        chartData.push(new BMap.Point(value[0], value[1]));
    })
    for (var i = 0; i < chartData.length-1; i++) {
        var startPoint = chartData[i];
        var endPoint = chartData[i + 1];
        showPath(startPoint, endPoint,i==0,i==chartData.length-2);
    }
}

// 两个坐标点连线
function showPath(startPoint, EndPoint,displayStartIcon,displayEndIcon){

    var walking = null;
    if(displayStartIcon && !displayEndIcon){ // 第一个起点只展示起点图标
        walking = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true },onMarkersSet:function(routes) {map.removeOverlay(routes[1].marker);}});
    }else if(!displayStartIcon && !displayEndIcon){//中间的起点终点不展示起点、终点图标
        walking = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true },onMarkersSet:function(routes) {map.removeOverlay(routes[0].marker);map.removeOverlay(routes[1].marker);}});
    }else{// 最后一个终点只展示终点图标
        walking = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true },onMarkersSet:function(routes) {map.removeOverlay(routes[0].marker);}});
    }

    walking.search(startPoint, EndPoint);
}


截图:





附:百度轨迹查询若参数有传纠偏(is_process=1&process_option=[...]),返回的数据定位时间有的可能会重复,要根据loc_time剔重下!

猜你喜欢

转载自fireinjava.iteye.com/blog/2366823
今日推荐