Добавление InfoWindow в маршрут маршрутов Google

Question

Я пытаюсь добавить infowindow к маршруту маршрутов, есть много примеров для добавления infowindow на прослушиватель событий на маркере, но как я могу переместить infoWindow, чтобы показать на фактическом запланированном маршрут от одного маркера к другому. Кто-то уже пытался задать этот вопрос раньше, но ответа не было (infoWindow on Directions Route), во всяком случае, я сделал много поисковых запросов и нашел только один вопрос, похожий на этот вопрос, но опять-таки нет ответа на него. Я попробовал infowindow.open (карта, это) в событии на маркере в обратном вызове, но он откроет infowindow на позиции маркера. Я просто хочу показать продолжительность и расстояние, похожие на Google .. что-то вроде прикрепленного изображения

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

Чтобы найти положение на маршруте и положить InfoWindow там, разобрать маршрут (the details are described in the documentation). Получите местоположение вдоль маршрута и вызовите метод setPosition вашего infowindow с этой позицией.

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

фрагмент кода:

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>