Направление Сервис Google API, перетаскиваемый источник - PullRequest
Новая
       2

Направление Сервис Google API, перетаскиваемый источник

0 голосов
/ 16 января 2019

Для начала я введу источник и пункт назначения, и он покажет отображаемый маршрут от пункта A до пункта B. Однако я хотел бы сделать источник A перетаскиваемым, чтобы он пересчитывал маршрут и отображал для меня,

 var directionsDisplay = new google.maps.DirectionsRenderer;
    var directionsService = new google.maps.DirectionsService;
    var map = new google.maps.Map(document.getElementById('map'), {
      mapTypeControl: false,
      center: {lat: 1.317206, lng: 103.772240},
      zoom: 13
    });

    new AutocompleteDirectionsHandler(map);
     directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('right-panel'));

            var onChangeHandler = function() {
      calculateAndDisplayRoute(directionsService, directionsDisplay);
    };

    document.getElementById('destination-input').addEventListener('change', 
 onChangeHandler);
 }




  function calculateAndDisplayRoute(directionsService, 
 directionsDisplay) {
    var start = document.getElementById('origin-input').value;
    var end = document.getElementById('destination-input').value;


    directionsService.route({
      origin: start,

      destination: end,
      travelMode: 'DRIVING'
    }, function(response, status) {
      if (status === 'OK') {
        directionsDisplay.setDirections(response);
      }
    });

   }

HTML-код приведен ниже.

<body>

<input id="origin-input" class="controls" type="text" 
    placeholder="Enter an origin location">

<input id="destination-input" class="controls" type="text"
    placeholder="Enter a destination location">

    <div id="map"></div>
</body>

Ниже приведен скриншот текущего проекта, который у меня есть. Скриншот

1 Ответ

0 голосов
/ 16 января 2019

Пожалуйста, попробуйте: 

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -24.345, lng: 134.46}  // Australia.
});

var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer({
    draggable: true,
    map: map,
});

displayRoute('Perth, WA', 'Sydney, NSW', directionsService,
    directionsDisplay);
}

function displayRoute(origin, destination, service, display) {
    service.route({
        origin: origin,
        destination: destination,
        travelMode: 'DRIVING',
        avoidTolls: true
    }, function(response, status) {
        if (status === 'OK') {
            display.setDirections(response);
        } else {
            alert('Could not display directions due to: ' + status);
        }
    });
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...