百度舆图猎取计划途径信息

本文意在处置惩罚经由过程制订两点坐标猎取百度搜刮的途径效果信息,用处是重现途径(比如在mapv上绘制轨迹显现效果图等)。
完成思绪:

  1. 加载百度舆图所需的js援用;

  2. html计划用于显现效果;

  3. 初始化百度舆图并加载到页面上,给舆图对象增加点击事宜的监听;

  4. 完成舆图的点击监听要领,主如果猎取到点击舆图的坐标,并肯定是出发点和尽头;

  5. 完成pointPathSearch()要领,建立百度舆图驾车途径检索的实例从而完成输入出发点尽头举行途径计划搜刮并设置检索完成的事宜监听(主如果完成途径返回的数据的封装),完成搜刮要领,主如果处置惩罚点击猎取的坐标,并挪用之前pointPathSearch()要领

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>猎取百度舆图点击两点的线路计划信息</title>
    <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=CmVUh1GnOGsl7YcRNDSBb3AEzrEE0RXr"></script>
    <style>
        html,body{width:100%;height: 100%;padding: 0;margin: 0}
        .map{width:100%;height:100%;padding:0;margin:0}
    </style>
</head>
<body>
<div id="map" class="map"></div>
<div style="position:absolute;top:10px;left: 10px;">
    <table>
        <tr>
            <td><span>出发点</span></td>
            <td><input type="text" id="sPoint"></td>
        </tr>
        <tr>
            <td><span>尽头</span></td>
            <td><input type="text" id="ePoint"></td>
        </tr>
        <tr>
            <td ><input type="button" value="查询" id="btnSearch"> </td>
            <td ><input type="button" value="重置" id="btnReset"> </td>
        </tr>
        <tr>
            <td><span>时候</span></td>
            <td><input type="text" id="time" readonly style="width:50px"> | <input type="text" id="timeformate" readonly  style="width:50px"></td>
        </tr>
        <tr>
            <td><span>间隔</span></td>
            <td><input type="text" id="distance" readonly  style="width:50px"> | <input type="text" id="distanceformate" readonly  style="width:50px"></td>
        </tr>
    </table>
    <hr/>
    <br/>
    <textarea id="result" rows="6" cols="4"></textarea>
</div>
</body>
</html>
<script>

    function creat(){
        // 建立Map实例
        map = new BMap.Map("map", { enableMapClick: false });
        var point = new BMap.Point(112.571757,37.798085);
        map.centerAndZoom(point, 9);
        map.enableScrollWheelZoom();
        if(typeof(mapClickHandler) === "function")
        {
            map.addEventListener("click", mapClickHandler);
        }
    }
    creat();
    var flag = true;
    function mapClickHandler(e){
        // 从经纬度获得地点
        var curPos = e.point.lng + "," + e.point.lat;
        if(flag){
            $("#sPoint").val(curPos);
            flag = false;
        }else{
            $("#ePoint").val(curPos);
            flag = true;
        }
    }

    $("#btnSearch").click(function(){
        var sp = $("#sPoint").val();
        var ep = $("#ePoint").val();
        if(sp && ep){
            /*/!*var sPoint = new BMap.Point(sp.split(",")[0],sp.split(",")[1]);
             var ePoint = new BMap.Point(ep.split(",")[0],ep.split(",")[1]);*!/*/
            pointPathSearch(sp.split(",")[0],sp.split(",")[1],
                    ep.split(",")[0],ep.split(",")[1]);
        }
        //namePathSearch("天津","太原",1,array);
    });

    $("#btnReset").click(function(){
        var sp = $("#sPoint").val("");
        var ep = $("#ePoint").val("");
        flag = true;
        map.clearOverlays();
    });

    function onSearchCompleteYeWHandler(data){
        //data中包括搜刮返回的一些数据
        if(data){
            $("#result").text(data.coors);
            $("#time").val(data.time);
            $("#timeformate").val(data.formattime);
            $("#distance").val(data.distance);
            $("#distanceformate").val(data.formatdistance);
        }
    }

    function pointPathSearch(slng,slat,elng,elat,policy,tujd){
        //肯定查询的战略,百度如今只支撑最短时候,最短旅程,不走高速三种战略
        if(policy){
            if(policy === 1){
                policy = BMAP_DRIVING_POLICY_LEAST_TIME;
            }else if(polycy === 2){
                policy = BMAP_DRIVING_POLICY_LEAST_DISTANCE;
            }else if(polycy === 3){
                policy = BMAP_DRIVING_POLICY_AVOID_HIGHWAYS;
            }
        }else{
            policy = BMAP_DRIVING_POLICY_LEAST_TIME;
        }
        if(slng && slat && elng && elat){
            var pA = new BMap.Point(slng,slat);
            var pB = new BMap.Point(elng,elat);
            driving = new BMap.DrivingRoute(
                    map,
                    {renderOptions:{map: map, autoViewport: true},
                        onSearchComplete:onSearchCompleteHandler,
                        policy:policy
                    });
            if(tujd && tujd.length>0){
                driving.search(pA, pB,{waypoints:tujd});
            }else{
                driving.search(pA, pB);
            }

        }
    }

    function onSearchCompleteHandler(result){
        //DrivingRouteResult
        //console.log(result.policy.length);
        var t = result.getPlan(0);
        var tt = t.getRoute(0).getPath();
        var result = "";
        $.each(tt,function(index,item){
            if(item){
                if(result === ""){
                    result += item.lng + "," + item.lat;
                }else{
                    result += ";" + item.lng + "," + item.lat;
                }
            }
        });
        var ob = new Object();
        ob.coors = result;
        ob.time = t.getDuration(false);
        ob.formattime = t.getDuration(true);
        ob.distance = t.getDistance(false);
        ob.formatdistance = t.getDistance(true);
        if(typeof onSearchCompleteYeWHandler === "function"){
            onSearchCompleteYeWHandler(ob);
        }
    }
</script>

demo只是显现了一个出发点尽头途径计划,这个要领能够完成批量猎取出发点和尽头的途径计划,重要能够猎取到计划的途径的路过点数据,此demo能够扩展到别的支撑途径计划功用舆图平台上。

    原文作者:new2old
    原文地址: https://segmentfault.com/a/1190000009487842
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞