Google Maps API - получение расстояния между двумя координатами - PullRequest
Новая
       62

Google Maps API - получение расстояния между двумя координатами

0 голосов
/ 09 июля 2020

Надеюсь найти здесь кого-то, кто уже работал с этим и может дать мне пример того, как это сделать sh.

Ожидаемые результаты -На простой странице HTML Мне нужны 2 поля ввода с автозаполнением с использованием API Карт Google (API мест?) Один ввод - это начало, другой ввод - конец, и он даст мне координаты этих двух мест, и с этими двумя координатами я хочу вычислить расстояние в км между этими двумя местами и отображение результата на экране.

Я провел небольшое исследование и придумал здесь этот код для полей автозаполнения с названием мест: пример автозаполнения ввода 

   google.maps.event.addDomListener(window,'load',initialize);
function initialize(){
    var autocomplete =new google.maps.places.Autocomplete(document.getElementById('txtautocomplete'));
    google.maps.events.addListener(autocomplete, 'plac_changed', function (){
        var places= autocomplete.getplace();
        var location= "<b>Location:</b>"+places.formatted_address+"<br/>";
        location += "<b>Latitude:</b>"+places.geometry.location.lat+"<br/>";
        location += "<b>Longitude:</b>"+places.geometry.location.lng    
    });
}

и для расчета расстояния между двумя точками я видел это в документации о маршрутах API где-то ... и я сохранил код: 

var startcoords=new google.maps.LatLng(latitude,longitude);
var fromcoords=new google.maps.LatLng(latitude,longitude);


let directionsService = new google.maps.DirectionsService();
  let directionsRenderer = new google.maps.DirectionsRenderer();
  directionsRenderer.setMap(map); // Existing map object displays directions
  // Create route from existing points used for markers
  const route = {
      origin: startcoords,
      destination: fromcoords,
      travelMode: google.maps.TravelMode.DRIVING
  }

  directionsService.route(route,
    function(response, status) { // anonymous function to capture directions
      if (status !== 'OK') {
        window.alert('Directions request failed due to ' + status);
        return;
      } else {
        directionsRenderer.setDirections(response); // Add route to the map
        var directionsData = response.routes[0].legs[0]; // Get data about the mapped route
        if (!directionsData) {
          window.alert('Directions request failed');
          return;
        }
        else {
          document.getElementById('msg').innerHTML += " Driving distance is " + directionsData.distance.text + " (" + directionsData.duration.text + ").";
        }
      }
    });

Извините за это, я совсем новенький с javascript, я застрял здесь уже несколько дней ..

1 Ответ

0 голосов
/ 14 июля 2020

Во-первых, не рекомендуется использовать координаты широты и долготы в запросе API Directions, поскольку это может повлиять на точность определения местоположения исходной и конечной точек. Поэтому я бы предложил вместо этого использовать formatted_address.

Поскольку вы хотите использовать API Places с 2 полями ввода, полями ввода начального и конечного местоположения, вам нужно будет создать два экземпляра Places API . Например: 

var startAutocomplete = new google.maps.places.Autocomplete(startInput);
var endAutocomplete = new google.maps.places.Autocomplete(endInput);

Вам нужно будет получить значения из метода getPlace(). В этом случае я сохранил значение formatted_address в переменных startValue и endValue, которые позже вы передадите службе маршрутов. Значение formatted_address как для начального, так и для конечного местоположения достаточно, чтобы служить в качестве origin и destination соответственно. 

 var startValue, endValue; 

 startAutocomplete.addListener("place_changed", function() {
     startValue = startAutocomplete.getPlace().formatted_address;
 });

 endAutocomplete.addListener("place_changed", function() {
     endValue = endAutocomplete.getPlace().formatted_address;
 });

Для DirectionsService вы можете использовать значения, полученные из getPlace() метод, подобный этому: 

directionsService.route({
   origin: startValue,
   destination: endValue,
   travelMode: "DRIVING"
}

Вы можете проверить пример, который я сделал здесь, наcodeandbox.io , чтобы лучше понять, как это сделать на JavaScript. В качестве бонуса я также добавил функцию alternativeRoutes, которая будет отображать самые быстрые и самые короткие маршруты.

ПРИМЕЧАНИЕ: для работы в этом примере вам нужно использовать свой собственный ключ API.

...