Как использовать API матрицы Google Distance в Angular

Question

Я пытаюсь использовать Google Distance Matrix API. https://developers.google.com/maps/documentation/distance-matrix/start. У меня есть необходимые параметры запроса, которые получены из текущего местоположения (начальная широта и долгота) и когда я нажимаю на маркер (я получаю конечную широту и долготу). Сейчас я пытаюсь вызвать API в служебном файле, он не работает должным образом.

Ниже приведен код службы: ниже приведены параметры запроса, переданные в объект sendQuery.

apiKeyToPass: "this will be apikey"
srcDestinationLat: 29.9809683
srcDestinationLng: 31.3377553
srcOriginLat: 11.127122499999999
srcOriginLng: 78.6568942

Вместо apikey я передаю apikey. Как передать вышеуказанные параметры sendQuery в приведенный ниже URL, чтобы я получил желаемый ответ.

getDistanceMatrix(sendQuery): Observable<any> {
       return this.http.get('https://maps.googleapis.com/maps/api/distancematrix/json?units=imperial&origins={{srcOriginLat}},{{srcOriginLng}}&destinations={{srcDestinationLat}},{{srcDestinationLng}}&key=apikey') 
    .map((response: Response) => {
        return response.json();
      })
      .catch(this.handleError);
  }

Когда я выполняю приведенный выше код, код запускается в цикл исключений вместо входа в цикл ответа.

Answer 1

Версия @agm/core — 1.0.0. Также необходимо установить @types/googlemaps. Далее необходимо импортировать

      import {} from 'googlemaps'; 

в свой компонент.

Вероятно, вы увидите сообщение об ошибке вроде: node_modules/@types/googlemaps/index.d.ts не является модулем. Чтобы исправить эту ошибку, просто создайте файл с именем index.d.ts в каталоге src и поместите следующую строку:

      declare module 'googlemaps'; 

Чтобы использовать службу матрицы расстояний, используйте следующее в своем компоненте:

      public getDistance(origin: LatLng, destination: LatLng) {
const matrix = new google.maps.DistanceMatrixService();
return new Promise((resolve, reject)=>{
  matrix.getDistanceMatrix({
  origins: [new google.maps.LatLng(origin.lat, origin.lng)],
  destinations: [new google.maps.LatLng(destination.lat,destination.lng)],
  travelMode: google.maps.TravelMode.DRIVING,
  }, function(response, status) {
    if(status === 'OK'){
      resolve(response)
    }else{
      reject(response);
    }
  });
})

}

Answer 2

Эта работа для меня:

public getDistancia(origen: string, destino: string) {
    return new google.maps.DistanceMatrixService().getDistanceMatrix({'origins': [origen], 'destinations': [destino], travelMode: 'DRIVING'}, (results: any) => {
        console.log('resultados distancia (mts) -- ', results.rows[0].elements[0].distance.value)
    });
}