百度地图——驾车轨迹绘制(poc)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/sinat_36707441/article/details/88526699

 

1.DrivingRoute显示地图搜索的轨迹,Polyline根据经纬度绘制直线轨迹。蓝色线为(DrivingRoute)生成的,红色线为(Polyline)生成的。

2.蓝色标志是替换了途径点的图片,为当前车辆位置。

3.红线加上了驾车方向的白色箭头

2.途经点需要百度秘钥才可以显示。

 

 

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=自己的秘钥"></script>
<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=utf8" http-equiv="Content-Type" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <meta content="定位" name="description" />
    <meta content="telephone=no" name="format-detection" />
    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=自己的秘钥"></script>

    <script type="text/javascript" src="http://api.map.baidu.com/library/MapWrapper/1.2/src/MapWrapper.min.js"></script>

    <style type="text/css">
        *{margin:0px;padding:0px;}
        html, body {height: 100%;}
        body, button, input, select, textarea, p, div {font: 16px/18px Verdana, Helvetica, Arial, sans-serif;}
        p{ width:603px; padding-top:3px;overflow:hidden;}
        .btn{width:142px;}
        #container{width:100%;height:90%;}
        .btn-info{ width:96%;margin:5px 2%;}
    </style>
</head>

<script type="text/javascript">
    var init = function() {
        var map = new BMap.Map("container");
        map.enableScrollWheelZoom();
        map.zoomTo(19);//min:3,max:19

        var lng = [113.263111, 112.467427, 111.037038, 109.399678, 108.36483];
        var lat = [23.149188, 23.05558, 22.906524, 22.89374, 22.829802];

        var position = Math.ceil(lng.length / 2);
        map.centerAndZoom(new BMap.Point(lng[position], lat[position]), 10);
        var pointLen = lng.length;
        var wayPoint = [];
        var allPoint = [];
        for(var i = 0; i < pointLen; i++){
            wayPoint[i] = new BMap.Point(lng[i], lat[i]);//轨迹点
            allPoint[i] = new BMap.Point(lng[i], lat[i]);//轨迹点
        }
        var startPoint = wayPoint[0];//起点
        var endPoint = wayPoint[wayPoint.length - 1];//终点
        wayPoint.pop();
        wayPoint.shift();

        var nowIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
            offset: new BMap.Size(10, 25), // 指定定位位置
            imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移
        });
        var wayPointIconHtml = "<div style=\"display:none;position: absolute; margin: 0px; padding: 0px; width: 36px; height: 40px; overflow: hidden;\"><img src=\"http://api0.map.bdimg.com/images/way-points.png\" style=\"display: none; border:none;margin-left:-47px; margin-top:-35px; \"></div>";
        var routePolicy = [BMAP_DRIVING_POLICY_LEAST_TIME,BMAP_DRIVING_POLICY_LEAST_DISTANCE,BMAP_DRIVING_POLICY_AVOID_HIGHWAYS]; //三种驾车策略:最少时间,最短距离,避开高速
        var driving = new BMap.DrivingRoute(map, {
            renderOptions:{
                map: map,
                autoViewport: true
            }
            ,policy: routePolicy[0]
            ,onPolylinesSet:function(routes) {
                searchRoute = routes[0].getPolyline();//导航路线
                map.addOverlay(searchRoute);
            }
            ,onMarkersSet:function(res) {
                if(res.length > 2){
                    var nowMarker = new BMap.Marker(res[res.length - 2].point,{icon:nowIcon});
                    map.removeOverlay(res[res.length - 2].marker); //删除所有点的倒数第二个,即途经点最后一个
                    res[res.length - 2].Nm.Yc.innerHTML = wayPointIconHtml;//更换html用于隐藏途经点
                }else{//只有起点和终点两个点
                    var nowMarker = new BMap.Marker(res[0].point,{icon:nowIcon});
                }
                var info = "当前位置信息";
                var infoWindowWidth = {
                    width:200
                }
                var infoWindow = new BMap.InfoWindow(info, infoWindowWidth);
                //点击标注显示信息
                nowMarker.addEventListener("mouseover", function(){
                    this.openInfoWindow(infoWindow);
                });
                map.addOverlay(nowMarker);
            }
        });
        driving.setSearchCompleteCallback(function(){
            //运动轨迹
        });
        //绘制线路
        var polyline = new BMap.Polyline(allPoint,//所有的GPS坐标点
            {
                strokeColor : "#99213A", //线路颜色
                icons:[draw_line_direction(5)],
                strokeWeight : 5//线路大小
            });
        map.addOverlay(polyline);

        function draw_line_direction(weight) {//绘制轨迹方向
            var icons=new BMap.IconSequence(
                new BMap.Symbol(BMap_Symbol_SHAPE_FORWARD_CLOSED_ARROW,
                    {
                        scale: weight/10,
                        strokeWeight: 1,
                        rotation: 180,
                        fillColor: '#ffffff',
                        strokeColor:'#ffffff',
                        fillOpacity: 0.8,
                        strokeOpacity:1
                    }),'100%','5%',false
            );
            return icons;
        }

        if(wayPoint.length == 0){
            driving.search(startPoint, endPoint);
        }else{
            driving.search(startPoint, endPoint, {waypoints: wayPoint});//waypoints绘制途经点
        }
    }


</script>

<body  οnlοad="init()">
    <div id="container"></div>
</body>

</html>

 

展开阅读全文

没有更多推荐了,返回首页