基于百度地图显示两点之间的线路:
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;
}
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;
var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true},policy: routePolicy[0]});
if(row.id == "2"){
driving.search(start,end, {waypoints:['南京夫子庙']});
}else{
driving.search(start,end);
}
$("#transitPathWindow").window('open');
}