百度地图根据经纬度坐标，显示轨迹

1.html 部分设置存放地图的div，定义id和宽高，并引入百度地图相关JS

<div id="baiduMap" style="width:600px;height:600px;"></div>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的百度地图开发者秘钥"></script>

2.JS部分，初始化的时候我就创造了一个searchTrackmap()方法，这个方法我是用于查找出数据库经纬度坐标并组成一个数组传入JS中。因为开始我们是甲方。。乙方给我们提供数据，我设计数据库的时候就省事了一下。。经纬度放在了一起。导致在java代码中还要将数据拆开，存入数组中，哈哈，当了回甲方，可把我牛逼坏了。

function searchTrackmap(vehiclePassTime,cphData,cphTypeData) {
    //查询基础数据
    $.ajax({
        type : 'POST',
        dataType : "json",
        data: {
            vehiclePassTime: vehiclePassTime,
            cphData: cphData,
            cphTypeData: cphTypeData
        },
        url : '${pageContext.request.contextPath}/webservice/vehicelInfo/TrackMap',
        success : function(data) {
            setTrackmap(data)
        }
    });
}
function setTrackmap(pointArr) {
    var map = new BMap.Map("mapcontainer");
    var point = new BMap.Point(87.623272, 43.831565);
    map.centerAndZoom(point, 13);
    map.enableScrollWheelZoom(); // 开启鼠标滚轮缩放
    map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
    if(pointArr.length>0){
        var s = pointArr.toString();
        
        var pointStr = s.split(",");
        var pointArr = [];

        for (var k = 0; k < pointStr.length; k += 2) {
            pointArr.push({
                lng: pointStr[k],
                lat: pointStr[k + 1]
            });
        }

        // 生成坐标点
        var trackPoint = [];
        for (var i = 0, j = pointArr.length; i < j; i++) {
            trackPoint.push(new BMap.Point(pointArr[i].lng, pointArr[i].lat));
        }

        map.centerAndZoom(trackPoint[0], 15);

        // 画线
        var polyline = new BMap.Polyline(trackPoint, {
            strokeStyle:"dashed",//solid为实线，dashed为虚线
            strokeColor: "#95F204",
            strokeWeight: 3,
            strokeOpacity: 1
        });
        map.addOverlay(polyline);
           
        // 配置图片
        var size = new BMap.Size(26, 26);
        var offset = new BMap.Size(0, -13);
        var imageSize = new BMap.Size(26, 26);
        var icon = new BMap.Icon("${pageContext.request.contextPath}/images/ns/carDocument/u191.svg", new BMap.Size(33, 50));

        // 画图标
        for (var i = 0, j = trackPoint.length; i < j; i++) {
            var marker = new BMap.Marker(trackPoint[i], {
                icon: icon,
                offset: offset
            }); // 创建标注    
            map.addOverlay(marker);

        }

        //根据经纬极值计算绽放级别
        function getZoom(maxLng, minLng, maxLat, minLat) {
            var zoom = ["50", "100", "200", "500", "1000", "2000", "5000", "10000", "20000", "25000", "50000", "100000", "200000", "500000", "1000000", "2000000"]; // 级别18到3。
            var pointA = new BMap.Point(maxLng, maxLat); // 创建点坐标A
            var pointB = new BMap.Point(minLng, minLat); // 创建点坐标B
            var distance = map.getDistance(pointA, pointB).toFixed(1); //获取两点距离,保留小数点后两位
            for (var i = 0, zoomLen = zoom.length; i < zoomLen; i++) {
                if (zoom[i] - distance > 0) {
                    return 18 - i + 3; //之所以会多3，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
                }
            }
        }
        function setZoom(points) {
            if (points.length > 0) {
                var maxLng = points[0].lng;
                var minLng = points[0].lng;
                var maxLat = points[0].lat;
                var minLat = points[0].lat;
                var res;
                for (var i = points.length - 1; i >= 0; i--) {
                    res = points[i];
                    if (res.lng > maxLng) maxLng = res.lng;
                    if (res.lng < minLng) minLng = res.lng;
                    if (res.lat > maxLat) maxLat = res.lat;
                    if (res.lat < minLat) minLat = res.lat;
                }
                var cenLng = (parseFloat(maxLng) + parseFloat(minLng)) / 2;
                var cenLat = (parseFloat(maxLat) + parseFloat(minLat)) / 2;
                var zoom = getZoom(maxLng, minLng, maxLat, minLat);
                map.centerAndZoom(new BMap.Point(cenLng, cenLat), zoom);
            } else {
                //没有坐标，显示全中国
                map.centerAndZoom(new BMap.Point(87.623272, 43.831565), 13);
            }
        }

        setZoom(pointArr)

    }
}

3.java部分，该部分是第二部请求java后台数据返回前台的操作。

@RequestMapping("/TrackMap")
    @ResponseBody
    public List<Map<String,Object>> TrackMap(String vehiclePassTime, String cphData, String cphTypeData){
        String startTime = null;
        String endTime = null;
        try {
            if(vehiclePassTime!=null && vehiclePassTime!= "") {
                String[] strCoods = vehiclePassTime.split(" - ");
                startTime = strCoods[0];
                endTime = strCoods[1];
            }
            List<VehicleAnalysis> vehicleAnalysis = vehicleAnalysisService.selectVehicleAnalysisSearch(cphData, cphTypeData, startTime, endTime);
            //转换轨迹图数据格式
            ArrayList arrayList = new ArrayList();
            for (VehicleAnalysis Item :vehicleAnalysis) {
                Map<String ,Object> coord = new HashMap<>();
                String[] strCoods = Item.getLatitudeLongitude().split(",");
                Double[] doubleCoods = {Double.parseDouble(strCoods[0]),Double.parseDouble(strCoods[1])};
                arrayList.add(doubleCoods);
            }
            return arrayList;
        } catch (Exception e) {
            logger.error("轨迹图分析查询失败！", e);
        }
        return null;
    }

前台会接收到如下数据

最终显示结果：