Javascript 谷歌地图API v3.0-显示方向路径上方的距离和估计时间

我希望我的方向看起来像我提供的图像中的方向。

这是我的代码，几乎所有内容都来自谷歌网站上的示例

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var haight = new google.maps.LatLng(37.7699298, -122.4469157);

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var mapOptions = {
    zoom: 14,
    center: haight
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  directionsDisplay.setMap(map);
}

function calcRoute() {
  var request = {
      origin: START, // Ill add both places later
      destination: END,
      travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
setTimeout(function(){
  calcRoute();
}, 2000);
    </script>

var方向显示；
var directionsService=new google.maps.directionsService（）；
var映射；
var haight=new google.maps.LatLng（37.7699298，-122.4469157）；
函数初始化（）{
directionsDisplay=new google.maps.DirectionsRenderer（）；
变量映射选项={
缩放：14，
中心：海特
}
map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
方向显示.setMap（地图）；
}
函数calcRoute（）{
var请求={
原点：开始，//稍后将添加这两个位置
目的地:完，
travelMode:google.maps.travelMode.DRIVING
};
路由（请求、功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
方向显示。设置方向（响应）；
}
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
setTimeout（函数（）{
calcRoute（）；
}, 2000);

---

PS.是否可以如图中所示显示方向的“虚线”路径？

以下是虚线方向多段线的示例：

var lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    fillOpacity: 1,
    scale: 3
};

var polylineDotted = new google.maps.Polyline({
    strokeColor: '#0eb7f6',
    strokeOpacity: 0,
    fillOpacity: 0,
    icons: [{
        icon: lineSymbol,
        offset: '0',
        repeat: '10px'
    }],
});

var rendererOptions = {
    map: map,
    suppressMarkers: false,
    polylineOptions: polylineDotted
};

下面的fiddle演示了如何使用InfoWindow实现整个过程

---

谢谢它的工作，但是默认情况下，我怎么才能在旅程中间显示信息栏呢？这是点击事件锁定的。您必须首先计算多段线的中点。请看，这可能有助于您实现这一目标。此代码中有一个bug<代码>多段线点应该是

多段线选项

对象，而不是

多段线

。看到和