<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
<title>20.1驾车导航</title>
</head>
<body>
<div style="height: 160px; color: #FFF; width: 960px; padding: 20px;">
<h1 style="color:Black">
你要去哪儿啊?</h1>
<div style="clear: both;">
<div style="float: left;">
<p>
<label for="placeStart" style="color:Black">
起点</label>:<input type="text" id="placeStart" /></p>
<p>
<label for="placeEnd" style="color:Black">
终点</label>:<input type="text" id="placeEnd" /></p>
</div>
<div style="float: left; padding: 20px 0 0 10px;">
<button onclick="findWay();" style="height: 60px; line-height: 60px; width: 50px;
background: #005EAC; color: #FFF; font-size: 20px;">
<b>OK</b></button>
</div>
</div>
</div>
<div style="clear: both;">
<div style="float: left; width: 500px; height: 340px; border: 1px solid gray" id="container">
</div>
<div id="divResult" style="float: left; width: 500px; height: 340px; background: #eee">
</div>
</div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);
function findWay() {
var start = document.getElementById("placeStart");
var end = document.getElementById("placeEnd");
if (start.value.length <= 0) {
alert("please input start place.");
start.focus();
}
if (end.value.length <= 0) {
alert("please input end place.");
end.focus();
}
var driving = new BMap.DrivingRoute(map, {//创建驾车导航对象
renderOptions: {
map:map,//驾车路线显示地图
panel: "divResult",//文字路线显示容器
autoViewport:true//自动调节视野
}
});
driving.setSearchCompleteCallback(function (result) {//判断驾车路线是否存在
if (driving.getStatus() == BMAP_STATUS_SUCCESS) {
}
else {
alert("没有搜索到路线，请确认起始点是否有效。");
start.focus();
}
});
driving.search(start.value, end.value);//查询路线
}
</script>
