百度地图 驾车导航

 

 

<!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>

posted on 2014-12-02 13:12  AlexGeng  阅读(661)  评论(0)    收藏  举报

导航