基于百度地图显示两点之间的线路

基于百度地图显示两点之间的线路:

1.在页面中设置div显示地图的位置
<div class="easyui-window" title="运输路径查看" id="transitPathWindow"
             modal="true" closed="true" collapsible="false" minimizable="false" maximizable="false" style="top:20px;left:100px;width: 800px; height: 400px">
    // 设置地图显示的id
    <div id="allmap"></div>
</div>
2.设置css样式
<style type="text/css">
    body, html{
                width: 100%;
                height: 100%;
                margin: 0px;
                font-family: "微软雅黑";
            }
    #allmap{height: 100%; width: 100%}
</style>
3.引用百度地图api
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=???"> 
</script> 
4.显示地图, 为页面中的”查询路径添加点击事件”
function() {
    // 获取选中的数据
    var row = $("#transitGrid").datagrid("getSelected");
    // 判断
    if(row == null){
        $.messager.alert("警告", "必须选中一行数据", "warning");
        return;
    }
    //百度API功能
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom('北京', 11);
    map.enableScrollWheelZoom(true);
    //三种驾车策略:最少时间,最短距离,避开高速
    var routePolicy = [BMAP_DRIVING_POLICY_LEAST_TIME, BMAP_DRIVING_POLICY_LEAST_DISTANCE, BMAP_DRIVING_POLICY_AVOID_HIGHWAYS];
    var start = row.wayBill.sendAddress;
    var end = row.wayBill.recAddress;
    // 获取driveringRoute
    var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true},policy: routePolicy[0]});

    // 给id为2路径 添加途经点  北京-上海
    if(row.id == "2"){
        // 显示路径  带途经点
        driving.search(start,end, {waypoints:['南京夫子庙']});
    }else{
        // 显示路径
        driving.search(start,end);
    }
    // 弹出窗口
    $("#transitPathWindow").window('open');
}

猜你喜欢

转载自blog.csdn.net/Orangesss_/article/details/82429220
今日推荐