谷歌地图API获取驱动时间和道路

Question

我正试图在图像中实现类似下面的内容

但实际上我没有任何想法，如果它可能或如何以及从哪里开始。 所以，如果你可以请带领我，如果有可能，或如何实现它或从哪里开始 或者如果有人知道类似的在线工作示例，那就太棒了 提前谢谢

Answer 1

我自己找到了答案，是的，感谢jfvanderwalt感谢google Docs for Direction API的有用链接，这使我找到了我需要的工作示例以及如何做到这一点，这是我的工作demo example Javascript：

    <script>

var rendererOptions = {
  draggable: true
};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
var directionsService = new google.maps.DirectionsService();
var map;

var australia = new google.maps.LatLng(41.171418,28.311553);

function initialize() {

  var mapOptions = {
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: australia
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById('directionsPanel'));

  google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
    computeTotalDistance(directionsDisplay.directions);
  });

  calcRoute();
}

function calcRoute() {

  var request = {
    origin: 'Istanbul, Turkey',
    destination: 'Ankara, Turkey',
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

function computeTotalDistance(result) {
  var total = 0;
  var time= 0;
  var from=0;
  var to=0;
  var myroute = result.routes[0];
  for (var i = 0; i < myroute.legs.length; i++) {
    total += myroute.legs[i].distance.value;
    time +=myroute.legs[i].duration.text;
    from =myroute.legs[i].start_address;
    to =myroute.legs[i].end_address;


  }
  time = time.replace('hours','H');
  time = time.replace('mins','M');
  total = total / 1000.
  document.getElementById('from').innerHTML = from + '-'+to;
  document.getElementById('duration').innerHTML = time ;
  document.getElementById('total').innerHTML =Math.round( total)+"KM" ;
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>

HTML：

<div id="map-canvas" style="margin-left:15px;float:left;width:930px; height:280px"></div>
<div style="float:left;padding-left:20px; padding-top:15px; width:100%; height: 80px;">
<div style="float:left;width: 50%;"><h3 id="from"></h3></div>
<div style="float:right;margin-right: 20px;width: 158px;text-align: right;">
<h3 id="duration"></h3>
</div>
<div style="float:right;width: 158px;text-align: right;">