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

Я пытаюсь добавить InfoWindow к маршруту маршрута. существует множество примеров добавления InfoWindow в прослушиватель событий на маркере.

Но как я могу переместить InfoWindow, чтобы показать на самом деле запланированный маршрут от одного маркера до другого. Кто-то уже пытался задать этот вопрос раньше, но не получил ответа (Информационное окно по маршруту маршрута).

Во всяком случае, я много гуглил и нашел только один вопрос, похожий на этот, но опять же на него нет ответа.

Я попробовал infowindow.open(map,this) для события на маркере в обратном вызове, но он откроет 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);

Изображение направлений Google


google-maps javascript google-directions-api infowindow directions
person kam bajwa    schedule 04.06.2015    source источник
comment
возможный дубликат события Google Maps click на маршруте   -  person geocodezip    schedule 04.06.2015
comment
Если вы просто хотите открыть информационное окно в точке на маршруте (не по щелчку мыши), все, что вам нужно, это позиция, в которой оно открывается.   -  person geocodezip    schedule 04.06.2015
comment
Привет, как мне определить положение точки на маршруте?   -  person kam bajwa    schedule 05.06.2015
comment
разобрать ответ от directionService.   -  person geocodezip    schedule 05.06.2015
comment
вы имеете в виду что-то вроде этого infowindow2.open(map, response);   -  person kam bajwa    schedule 05.06.2015
comment
это должен быть MVCObject, который предоставляет свойство позиции   -  person kam bajwa    schedule 05.06.2015
comment
Нет. Я имею в виду разобрать ответ направления, как в моем ответе, получить местоположение по маршруту и ​​вызвать метод setPosition вашего информационного окна с этой позицией.   -  person geocodezip    schedule 05.06.2015

Ответы (2)


arrow_upward
14
arrow_downward

Чтобы найти позицию на маршруте и поместить туда информационное окно, проанализируйте маршрут (подробности описаны в документации). Получите местоположение по маршруту и ​​вызовите метод setPosition вашего информационного окна с этой позицией.

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

доказательство концепции скрипки

введите здесь описание изображения

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

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 = Math.floor(response.routes[0].legs[0].steps.length / 2);
      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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>

person geocodezip    schedule 04.06.2015

arrow_upward
3
arrow_downward

Вы можете использовать массив review_path, чтобы найти центральную точку пути. А затем установите его как положение информационного окна.

var center_point = response.routes[0].overview_path.length/2;

var infowindow = new google.maps.InfoWindow();
infowindow.setContent(response.routes[0].legs[0].distance.text + "<br>" + response.routes[0].legs[0].duration.text + " ");
infowindow.setPosition(response.routes[0].overview_path[center_point|0]);
infowindow.open(map);
person Dilshan    schedule 04.05.2018
comment
это полезно, но это должен быть комментарий - person Taufik Nur Rahmanda; 21.07.2018