BaiDuAPI

<!DOCTYPE html>
<html lang="en">
<head>
        <!DOCTYPE html>  
        <html>  
        <head>  
            <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
            <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=0zoDf36d88YDLBpLiIwW0ARfegyltOQt"></script>
            <title>Baidu Map </title>  
            <style type="text/css">  
                html{height:100%}  
                body{height:100%;margin:0px;padding:0px}  
                #container{height:100%}  
                #allmap{
                    height: 500px;
                }
            </style>  
        </head>  
        <body>
                <div id="allmap"></div>
               
        </body>  
        <script type="text/javascript" src="./map.js">
            
        </script>
        </html>

 1 // 百度地图API功能
 2     var map = new BMap.Map("allmap");
 3     map.centerAndZoom(new BMap.Point(100.132770 ,26.525043),11);
 4     map.enableScrollWheelZoom(true);
 5     
 6     // 用经纬度设置地图中心点
 7     function theLocation(){
 8         if(document.getElementById("longitude").value != "" && document.getElementById("latitude").value != ""){
 9             map.clearOverlays(); 
10             var new_point = new BMap.Point(document.getElementById("longitude").value,document.getElementById("latitude").value);
11             var marker = new BMap.Marker(new_point);  // 创建标注
12             map.addOverlay(marker);              // 将标注添加到地图中
13             map.panTo(new_point);      
14         }
15     
16     }
17     var transit = new BMap.DrivingRoute(map, {
18         renderOptions: {
19             map: map,
20             panel: "r-result",
21             enableDragging : true //起终点可进行拖拽
22         },  
23     });
24     transit.search("丽江站","古城区体育场");

运行效果如下：

可以缩放大小也可以改变始终点，地图便自动推荐路线