Google Directions API

demo code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps get Around</title>
<script src="./tpl/Home/vifnn/common/js/jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=false"></script>
<script type="text/javascript">
var infowindow,marker,marker_start,marker_end,info_start,info_end;
var geocoder = new google.maps.Geocoder();
var point,map;
var colorArray = new Array(
        '#FF0000','#FF00FF','#D15FEE','#B03060',
        '#00CD00','#0F0F0F','#1E90FF','#66CDAA',
        '#87CEFF','#7D9EC0','#8B7B8B','#CD2990',
        '#BDB76B','#BC8F8F','#BF3EFF','#BC8F8F',
        '#B4EEB4','#AB82FF','#A52A2A','#8E388E',
        '#8B8B00','#98F5FF','#CD3333','#EE2C2C'
);
var arr_map = new Array();
function initialize() {
    //var point = new google.maps.LatLng(18.252847, 109.511909);

    if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            point = new google.maps.LatLng(
                    position.coords.latitude,
                    position.coords.longitude
            );
            loadMap(point);
        });
    } else {
        // Browser doesn't support Geolocation
        handleNoGeolocation();
    }

}
function loadMap(point){
    var myOptions = {
        zoom: 13, 
        center: point,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false, 
        overviewMapControl: false, 
        scaleControl: false, 
        streetViewControl: false 
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    marker = new google.maps.Marker({
        position: point,
        map: map
    });
    marker.setDraggable(true); 
    infowindow = new google.maps.InfoWindow({
        content: "",
        size: new google.maps.Size(50,50)
    });
    google.maps.event.addListener(marker, 'dragend', function(){
        showAddress(map, marker);
    });

    google.maps.event.addListener(marker, 'click', function(){
        showAddress(map, marker);
    });

    google.maps.event.addListener(map, 'click', function(e) {
        clickMou(map,marker,e.latLng);
    });

    showAddress(map,marker);
}

function handleNoGeolocation() {
    point = new google.maps.LatLng(28.127907999999998, 112.98059999999998);
    loadMap(point);
}

function makeInfo(obj,latlng){
    var address = obj[1].formatted_address + "<br />";
    address = obj[0].formatted_address + "<br />";
    address += "纬度：" + latlng.lat() + "<br />";
    address += "经度：" + latlng.lng();
    infowindow.setContent(address);
    infowindow.open(map, marker);
}
function showAddress(map, marker)
{
    var latlng = marker.getPosition();
    geocoder = new google.maps.Geocoder();

    geocoder.geocode({'latLng': latlng}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            if (results[1]) {
                makeInfo(results,latlng)
            }
        } else {
            alert("Geocoder failed due to: " + status);
        }
    });
}

function clickMou(map, marker,location)
{
    marker.setPosition(location)
    geocoder.geocode({'latLng': location}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            if (results[1]) {
                makeInfo(results,latlng)
            }
        } else {
            alert("Geocoder failed due to: " + status);
        }
    });
}

function initializeMarksAndInfo(){
    info_start = new google.maps.InfoWindow({
        content: "",
        size: new google.maps.Size(50,50)
    });
    info_end = new google.maps.InfoWindow({
        content: "",
        size: new google.maps.Size(50,50)
    });
}

function markAndInfo(point,content,parm){

    if(parm == 1){
        if(marker_start == undefined){
            marker_start = new google.maps.Marker({
                position: point,
                map: map
            });
        }else{
            marker_start.setPosition(point);
        }
        info_start.setContent(content);
        info_start.open(map, marker_start);
    }else{
        if(marker_end == undefined){
            marker_end = new google.maps.Marker({
                position: point,
                map: map
            });
        }else{
            marker_end.setPosition(point)
        }
        info_end.setContent(content);
        info_end.open(map, marker_end);
    }

}

$(function(){
    modeToSelect('driving');
    initializeMarksAndInfo();

    $("#typeway").change(function(){
        $mode = $(this).val()
        modeToSelect($mode);
    })

    $("button").click(function(){
        $("#div_json").empty();
        $("#disc_desc").empty();
        $mode = $("#typeway").val();
        $json = getJson($mode);
        $.get("/index.php?g=Home&m=Map&a=getDirection&r=" + Math.random(),$json
                , function(data, textStatus) {
                    //$("#div_json").text(data);
                    $obj = eval("("+data+")");
                  
                    if(arr_map.length > 0){

                        for(var m = 0; m < arr_map.length; m++){
                            arr_map[m].setMap(null);
                        }
                        arr_map.splice(0,arr_map.length);
                    }

                    if($obj.status == "OK"){
                        for(var j = 0; j <$obj.routes.length;j++ ){
                            $data_array = $obj.routes[j].legs[0];

                            $point_start = new google.maps.LatLng($data_array.start_location.lat,$data_array.start_location.lng);
                            $point_end = new google.maps.LatLng($data_array.end_location.lat,$data_array.end_location.lng);

                            $address_start = $data_array.start_address + "<br />";
                            $address_start += "纬度：" + $data_array.start_location.lat + "<br />";
                            $address_start += "经度：" + $data_array.start_location.lng;

                            $address_end = $data_array.end_address + "<br />";
                            $address_end += "纬度：" + $data_array.end_location.lat+ "<br />";
                            $address_end += "经度：" + $data_array.end_location.lng;

                            markAndInfo($point_start,$address_start,1);
                            markAndInfo($point_end,$address_end,2);

                            $("#div_json").append('<div>方案'+(j+1)+':'+$obj.routes[j].summary+'全程'+$data_array.distance.text+',大约耗时'+$data_array.duration.text+"</div>");
                            $data_steps = $data_array.steps;

                            if($mode == 'transit'){
                                for(var i =0;  i< $data_steps.length;i++){
                                    $temp = $data_steps[i];
                                    $("#div_json").append("<div>step"+(j+1)+"_"+(i+1)+":"+$temp.html_instructions+""+$temp.distance.text+"耗时"+$temp.duration.text+"</div>");

                                    if($temp.travel_mode == 'WALKING'){
                                        $temp_arr = $temp['steps'];
                                        if($temp_arr.length > 1){
                                            for(var i_i = 0; i_i < $temp_arr.length; i_i++){
                                                $temp = $temp_arr[i_i];
                                                $("#div_json").append("<div>step"+(j+1)+"_"+(i+1)+"_"+(i_i+1)+":"+$temp.html_instructions+""+$temp.distance.text+"耗时"+$temp.duration.text+"</div>");
                                            }
                                        }

                                    }else{

                                        $temp = $temp.transit_details;
                                        $("#div_json").append("<div>"+$temp.line.short_name+"--"+($temp.headway)/60+"/趟</div>");
                                        $("#div_json").append("<div>"+$temp.departure_stop.name+"--"+$temp.arrival_stop.name+"--共"+$temp.num_stops+"站</div>");
                                    }

                                }
                            }else{
                                for(var i =0;  i< $data_steps.length;i++){
                                    $temp = $data_steps[i];
                                    $("#div_json").append("<div>step"+(j+1)+"_"+(i+1)+":"+$temp.html_instructions+""+$temp.distance.text+"耗时"+$temp.duration.text+"</div>");
                                }

                            }


                            /*var marker_new = new google.maps.Marker({
                             position: $obj.routes[0].overview_polyline.points,
                             map: map
                             });*/

                            var encodedPoints   = $obj.routes[j].overview_polyline.points;
                            var decodedPoints  =  google.maps.geometry.encoding.decodePath(encodedPoints) ;

                            arr_map[j] = new google.maps.Polyline ( {
                                strokeColor: colorArray[j] ,
                                strokeOpacity: 1.0 ,
                                strokeWeight: 2 ,
                                path: decodedPoints ,
                                clickable: false
                            })
                            arr_map[j].setMap(map)
                         }
                    }else{
                        alert('没有找到路线')
                    }
                });
    });
})

function getJson(type){
    $start = $("#start").val();
    $end = $("#end").val();
    $json = {'start':$start,'end':$end,'type':type};
    if(type != "transit"){
        $json.alternatives = $("#alternatives").val();
        $json.avoid = $(':radio[name="avoid"]:checked').val();
    }else{
        $json.start_time = $("#start_time").val();
        $json.end_time = $("#end_time").val();
    }
    return $json;
}
function modeToSelect(type){
    var html_first = '<option value="false" selected>单路线查询<option value="true">多线路查询';
    var html_second = '<input type="radio" name="avoid" value= "highways" >避开高速公路<input type="radio" name="avoid" value= "tolls">避开收费公路/桥梁';
    var html_third = '<input type="radio" name="avoid" value= "highways" >观光路线';
    var html_forth;
    $("#alternatives").empty();
    $("#alternatives").hide()
    $("#avoid").empty();
    $("#avoid").hide()
    $("#start_time").empty();
    $("#start_time").hide()
    $("#end_time").empty();
    $("#end_time").hide()
    $("#bus_desc").hide();
    switch (type){
        case "driving":
            $("#alternatives").append(html_first);
            $("#alternatives").fadeIn();
            $("#avoid").append(html_second);
            $("#avoid").fadeIn();
            break;
        case "bicycling":
            $("#alternatives").append(html_first);
            $("#alternatives").fadeIn();
            $("#avoid").append(html_third);
            $("#avoid").fadeIn();
            break;
        case "transit":
            for(var i = 0; i<24; i++){
                if(i >=10){
                    html_forth += '<option value="'+i+':00:00">'+i+':00:00';
                    html_forth += '<option value="'+i+':30:00">'+i+':30:00';
                }else{
                    //09:42:22
                    if(i == 6){
                        html_forth += '<option value="0'+i+':00:00" selected>0'+i+':00:00';
                    }else{
                        html_forth += '<option value="0'+i+':00:00">0'+i+':00:00';
                    }
                    html_forth += '<option value="0'+i+':30:00">0'+i+':30:00';
                }
            }

            $("#start_time").append(html_forth);
            $("#start_time").fadeIn();
            $("#end_time").append(html_forth);
            $("#end_time").fadeIn();
            $("#bus_desc").fadeIn();
            break;
        case "walking":
            $("#alternatives").append(html_first);
            $("#alternatives").fadeIn();
            $("#avoid").append(html_third);
            $("#avoid").fadeIn();
            break;
        default:
            return;
    }
}

</script>
</head>
<body onload="initialize()">
<select id="typeway" style=" 30%;" >
    <option value="driving" selected>驾车
    <option value="bicycling">骑行
    <option value="walking">步行
    <option value="transit">公交
</select>

<select id = 'alternatives' style = "display:none">
</select>
<span style="display: none" id = "avoid">
</span>
<span id = "bus_desc" style="display: none">公交车运行时间：</span>
<select id = 'start_time' style = "display: none">
</select>
<select id = 'end_time' style = "display: none">
</select>

输入起点位置:<input type = "text" name = "start" id = "start"value = "长沙 火车站" >
输入目的地:<input type = "text" name = "end" id = "end" value = "长沙 火车南站" >
<button>搜路线</button>
<div id="map_canvas" style=" 100%; height: 800px"></div>
<div id = "div_json"></div>
</body>
</html>
效果图：
积累知识，分享知识，学习知识。