首页 > 代码库 > 百度地图 驾车导航

百度地图 驾车导航

 

 

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />      <script type="text/javascript" src=http://www.mamicode.com/"http://api.map.baidu.com/api?v=1.4"></script>    <script type="text/javascript" src=http://www.mamicode.com/"http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>    <script type="text/javascript" src=http://www.mamicode.com/"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>

百度地图 驾车导航