根据gps坐标设置车辆行驶途经点

Our sky

已于 2022-04-24 17:42:53 修改

阅读量716

点赞数

分类专栏：前端文章标签： javascript

于 2020-08-03 19:21:06 首次发布

本文链接：https://blog.youkuaiyun.com/fei0700/article/details/107771418

版权

前端专栏收录该内容

14 篇文章

订阅专栏

根据gps坐标设置车辆行驶途经点

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<title>设置驾车路线途经点</title>
</head>
<body>
<div id="allmap"></div>
    <!--ajax访问后台引用-->
<script src="../JavaScript/Global.js.aspx" type="text/javascript"></script>
    <!--百度地图api引用-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak="></script>
<script type="text/javascript">
        // 百度地图API功能
        var map = new BMap.Map("allmap");
        //地图中心
        map.centerAndZoom(new BMap.Point(116.3972282409668, 39.90960456049752), 11);
        // 左上角，添加比例尺
        var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});
        //左上角，添加默认缩放平移控件
        var top_left_navigation = new BMap.NavigationControl();  
        //添加控件和比例尺
        map.addControl(top_left_control);        
        map.addControl(top_left_navigation); 
        //可滚轮缩放
        map.enableScrollWheelZoom();
        //路线策略(0=默认，1=优先高速，2=避开高速，3=避开拥堵)
        var routePolicy = [BMAP_DRIVING_POLICY_DEFAULT, BMAP_DRIVING_POLICY_FIRST_HIGHWAYS, BMAP_DRIVING_POLICY_AVOID_HIGHWAYS, BMAP_DRIVING_POLICY_AVOID_CONGESTION];
        //获取经纬度
        var Code = getQueryVariable("RecCode");
        var FromCode = getQueryVariable("FromCode");
        //后台访问
        var r = NewAjaxRequest("AppointmentMaterialsService", "<Code>" + Code + "</Code><FromCode>" + FromCode + "</FromCode>", "GetWarehouse");
        if (eval(r) != null && eval(r).length >= 2)
            huoChe();
        else
            alert("到货仓库无坐标");
        //起点
        function huoChe() {
            var arrayList = [];
            var p1 = new BMap.Point(eval(r)[0].Longitude, eval(r)[0].Latitude);//起点
            var p2 = new BMap.Point(eval(r)[eval(r).length - 1].Longitude, eval(r)[eval(r).length - 1].Latitude);//终点
            drawPoint(p1, eval(r)[0].Wh_Name);
            drawPoint(p2, eval(r)[eval(r).length - 1].Wh_Name);

            for (var i = 0; i < eval(r).length; i++) {
                if (i > 0 && i < eval(r).length - 1) {
                    var a = new BMap.Point(eval(r)[i].Longitude, eval(r)[i].Latitude);
                    drawPoint(a, eval(r)[i].Wh_Name)
                    arrayList.push(a);
                }
            }
            //坐标显示
            showPolyDriving(p1, p2, arrayList)
        }
        //驾车api
        function showPolyDriving(start,end,pointList){
            var driving = new BMap.DrivingRoute( map, {
                renderOptions:{
                    map: map, 
                    autoViewport: true
                },policy: routePolicy[1]
            });
            driving.search(
                start, 
                end,
                {
                    waypoints:pointList //points表示途经点
                }
            );
        }
        // 绘制marker（起点、经点、终点），添加文本标注
        function drawPoint(point,content){
            var marker = new BMap.Marker(point);
            this.map.addOverlay(marker);
            var label = new BMap.Label(content,{
                offset:new BMap.Size(20,-10)
            });
            marker.setLabel(label);
        }
        //获取仓库编码
        function getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) { return pair[1]; }
            }
            return (false);
        }
    </script>
    </body>
</html>

参考