Hinzufügen von InfoWindow auf Google Routenplaner Route

Question

Ich versuche, ein Infowindow Route Routen hinzuzufügen, gibt es viele Beispiele da draußen hinzufügen Infowindow auf einem Ereignis Listener auf einem Marker, aber wie kann ich das InfoWindow verschieben, um auf dem tatsächlichen geplanten zeigen Route von einem Marker zum anderen. Jemand hat bereits versucht, diese Frage vorher zu stellen, aber keine Antwort (infoWindow on Directions Route), trotzdem habe ich viel gegoogelt und nur eine ähnliche Frage gefunden, aber es gibt keine Antwort darauf. ich versuchte infowindow.open (Karte, das) auf einem Ereignis auf Markierung im Rückruf, aber es wird Infowindow auf Marker Position öffnen .. es ist nur ich möchte Dauer und Entfernung ähnlich wie Google .. etwas wie in dem beigefügten Bild

zeigen

var infowindow2 = new google.maps.InfoWindow(); 
distanceService.getDistanceMatrix(distanceRequest, function (response, status) { 
    if (status == "OK") { 
     infowindow2.setContent(response.rows[0].elements[0].distance.text + "<br>" + response.rows[0].elements[0].duration.text + " ") 
    } 
    else { 
     alert("Error: " + status) 
    } 
    }) 
infowindow2.open(map, this); 

Answer 1

Um eine Position auf einer Route zu finden und eine infowindow dort setzen, analysieren die Route (the details are described in the documentation). Rufen Sie eine Position entlang der Route ab und rufen Sie die setPosition-Methode Ihres Infofensters mit dieser Position auf.

function calcRoute(start, end) { 
    var request = { 
     origin:start, 
     destination:end, 
     travelMode: google.maps.DirectionsTravelMode.DRIVING 
    }; 
    directionsService.route(request, function(response, status) { 
    if (status == google.maps.DirectionsStatus.OK) { 
     directionsDisplay.setDirections(response); 
     var step = 1; 
     var infowindow2 = new google.maps.InfoWindow(); 
     infowindow2.setContent(response.routes[0].legs[0].steps[step].distance.text + "<br>" + response.routes[0].legs[0].steps[step].duration.text + " "); 
     infowindow2.setPosition(response.routes[0].legs[0].steps[step].end_location); 
     infowindow2.open(map); 
    } 
    }); 
} 

proof of concept fiddle

Code-Schnipsel:

var directionsDisplay; 
 
var directionsService = new google.maps.DirectionsService(); 
 
var map; 
 

 
function initialize() { 
 
    directionsDisplay = new google.maps.DirectionsRenderer(); 
 
    var chicago = new google.maps.LatLng(41.850033, -87.6500523); 
 

 
    var mapOptions = { 
 
    zoom: 7, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    center: chicago 
 
    } 
 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 
    directionsDisplay.setMap(map); 
 
    calcRoute("67 The Windmill Hill, Allesley, Coventry CV5 9FR, UK", "26 Rosaville Crescent, Allesley, Coventry CV5 9BP, UK"); 
 
} 
 

 
function calcRoute(start, end) { 
 
    var request = { 
 
    origin: start, 
 
    destination: end, 
 
    travelMode: google.maps.DirectionsTravelMode.DRIVING 
 
    }; 
 
    directionsService.route(request, function(response, status) { 
 
    if (status == google.maps.DirectionsStatus.OK) { 
 
     directionsDisplay.setDirections(response); 
 
     var step = 1; 
 
     var infowindow2 = new google.maps.InfoWindow(); 
 
     infowindow2.setContent(response.routes[0].legs[0].steps[step].distance.text + "<br>" + response.routes[0].legs[0].steps[step].duration.text + " "); 
 
     infowindow2.setPosition(response.routes[0].legs[0].steps[step].end_location); 
 
     infowindow2.open(map); 
 
    } 
 
    }); 
 
} 
 

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

html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
} 
 
#panel { 
 
    position: absolute; 
 
    top: 5px; 
 
    left: 50%; 
 
    margin-left: -180px; 
 
    z-index: 5; 
 
    background-color: #fff; 
 
    padding: 5px; 
 
    border: 1px solid #999; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map-canvas"></div>