百度地图开发系列(4):使用采集到的GPS点实现轨迹的解决方案

简介: 百度地图开发系列(4):使用采集到的GPS点实现轨迹的解决方案

 var map = new BMap.Map("map");
    /**采集到的GPS点**/
    var Points = [
        {"id": "1", "lng": 121.554586, "lat": 29.813444},
        {"id": "2", "lng": 121.564567, "lat": 29.811347},
        {"id": "3", "lng": 121.575346, "lat": 29.820528},
        {"id": "4", "lng": 121.553464, "lat": 29.82363},
        {"id": "5", "lng": 121.54078, "lat": 29.820371},
    ]
    var p = Math.ceil(Points.length / 2);
    map.centerAndZoom(new BMap.Point(Points[p].lng, Points[p].lat), 15);
    map.enableScrollWheelZoom();
    //路线;
    var driving;
    for (var i in PointArr) {
        //起点
        if (i == 0) {
            addMarker(new BMap.Point(Points[i].lng, Points[i].lat), "起点");
            continue;
        }
        //线路;
        driving = new BMap.DrivingRoute(map, {
            renderOptions: {map: map, autoViewport: false},
            onMarkersSet: function (routes) {
                map.removeOverlay(routes[0].marker); //删除API自带起点
                map.removeOverlay(routes[1].marker); //删除API自带终点
            }
        });
        //终点
        driving.search(new BMap.Point(Points[i - 1].lng, Points[i - 1].lat),
                new BMap.Point(Points[i].lng, Points[i].lat));
        if (i == Points.length - 1) {
            addMarker(new BMap.Point(Points[i].lng, Points[i].lat), "终点");
        }
    }
    /**
     * 标记
     * @param {Object} point
     */
    function addMarker(point, name) {
        var marker = new BMap.Marker(point);
        var label = new BMap.Label(name, {
            offset: new BMap.Size(20, -10)
        });
        marker.setLabel(label);
        map.addOverlay(marker);
    }


Done!

相关文章
|
6月前
|
开发工具 git 开发者
百度搜索:蓝易云【Git实际开发的流程】
以上是Git在实际开发中的一般流程。Git的分布式版本控制系统使得团队开发更加高效和灵活,并能有效管理项目的版本历史。
62 1
|
3月前
|
前端开发 JavaScript 定位技术
GPS坐标转百度坐标
GPS坐标转百度坐标
38 1
|
4月前
|
定位技术 开发者
百度地图开发 —— 获取百度地图开发的 AK
百度地图开发 —— 获取百度地图开发的 AK
329 3
|
4月前
|
JavaScript 定位技术
vue-baidu-map 绘制行政区划的轮廓,添加行政区划名称(含给覆盖物添加点击事件)——vue 百度地图开发
vue-baidu-map 绘制行政区划的轮廓,添加行政区划名称(含给覆盖物添加点击事件)——vue 百度地图开发
253 1
|
4月前
|
JavaScript 定位技术
vue 百度地图开发【教程】3. 自定义百度地图主题
vue 百度地图开发【教程】3. 自定义百度地图主题
164 0
|
4月前
|
JavaScript 定位技术
vue 百度地图开发【教程】1. 绘制百度地图(不使用 vue-baidu-map,解决 BMap is undefined)
vue 百度地图开发【教程】1. 绘制百度地图(不使用 vue-baidu-map,解决 BMap is undefined)
403 0
|
6月前
|
Android开发
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析
|
6月前
|
JavaScript 前端开发 定位技术
GPS坐标显示在百度地图上(Qt+百度地图)
GPS坐标显示在百度地图上(Qt+百度地图)
83 0
|
6月前
|
前端开发 定位技术
百度地图开发如何自定义控件(无敌的解决办法)
百度地图开发如何自定义控件(无敌的解决办法)
59 0
百度地图开发如何自定义控件(无敌的解决办法)
|
6月前
|
存储 前端开发 Java
基于Springboot实现仿百度网盘开发
基于Springboot实现仿百度网盘开发