欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

百度地图多个坐标连成轨迹 博客分类: htmljs 百度地图多个坐标点轨迹

程序员文章站 2024-02-25 08:28:40
...
背景:平时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 (这位兄弟写的好详细,主要参考他这边的百度地图多个坐标连成轨迹
            
    
    博客分类: htmljs 百度地图多个坐标点轨迹 )

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);
}


截图:
百度地图多个坐标连成轨迹
            
    
    博客分类: htmljs 百度地图多个坐标点轨迹

百度地图多个坐标连成轨迹
            
    
    博客分类: htmljs 百度地图多个坐标点轨迹


附:百度轨迹查询若参数有传纠偏(is_process=1&process_option=[...]),返回的数据定位时间有的可能会重复,要根据loc_time剔重下!
  • map.zip (2.8 KB)
  • 描述: map.zip
  • 下载次数: 168
  • 百度地图多个坐标连成轨迹
            
    
    博客分类: htmljs 百度地图多个坐标点轨迹
  • 大小: 1.3 MB
  • 百度地图多个坐标连成轨迹
            
    
    博客分类: htmljs 百度地图多个坐标点轨迹
  • 大小: 604.5 KB