Как сделать автозаполнение текстового поля с несколькими направлениями путевой точки? - PullRequest
Новая
       21

Как сделать автозаполнение текстового поля с несколькими направлениями путевой точки?

0 голосов
/ 17 октября 2019

Мне нужно сделать 3 текстовых поля с автозаполнением, а также будет отображать путевую точку от textbox1 к textbox2 к textbox3 на карте. Автозаполнение в текстовом поле работает хорошо, но путевая точка не отображается.

В html идентификатор первого текстового поля будет "start"

идентификатор второго текстового поля будет "destination-input"

Идентификатор третьего текстового поля будет "destination-input2" 

    function AutocompleteDirectionsHandler(map) {
  this.map = map;
  this.originPlaceId = null;
  this.destinationPlaceId = null;
  this.destinationPlaceId2 = null;
  this.travelMode = 'WALKING';
  this.directionsService = new google.maps.DirectionsService;
  this.directionsRenderer = new google.maps.DirectionsRenderer;
  this.directionsRenderer.setMap(map);



var originInput = document.getElementById('start');
  var destinationInput = document.getElementById('destination-input');
  var destinationInput2 = document.getElementById('destination-input2');


  var originAutocomplete = new google.maps.places.Autocomplete(originInput);
  // Specify just the place data fields that you need.
  originAutocomplete.setFields(['place_id']);

  var destinationAutocomplete =
      new google.maps.places.Autocomplete(destinationInput);
  // Specify just the place data fields that you need.
  destinationAutocomplete.setFields(['place_id']);

  var destinationAutocomplete2 =
      new google.maps.places.Autocomplete(destinationInput2);
  // Specify just the place data fields that you need.
  destinationAutocomplete2.setFields(['place_id']);




  this.setupPlaceChangedListener(originAutocomplete, 'ORIG');
  this.setupPlaceChangedListener(destinationAutocomplete, 'DEST');
  this.setupPlaceChangedListener(destinationAutocomplete2, 'DEST2');



this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(originInput);
  this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(destinationInput);
  this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(destinationInput2);


}


AutocompleteDirectionsHandler.prototype.setupPlaceChangedListener = function(
autocomplete, mode) {

var me = this;

autocomplete.bindTo('bounds', this.map);


autocomplete.addListener('place_changed', function() {
    var place = autocomplete.getPlace();



if (!place.place_id) {
  window.alert('Please select an option from the dropdown list.');
  return;
}
if (mode === 'ORIG') {
  me.originPlaceId = place.place_id;
}
  else if (mode === 'DEST'){
    me.destinationPlaceId = place.place_id;
  }

else {
   me.destinationPlaceId2 = place.place_id;
}
me.route();


 });

};

Я ожидаю, что будет отображаться путевая точка, включая автозаполнение в текстовом поле

...