Discussion :

[angie13003]

Bonjour,

Alors j'ai créer un script avec l'api de google afin de calculer la distance entre deux points et obtenir un tarif en fonction de la distance. Le soucis qui se posent à moi c'est que je dois cliquer deux fois sur le bouton afin d'avoir la réponse. Je ne vois pas d'où vient mon problème. J'expose mon code ci-dessous.

MapService.ts

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
import { Injectable } from '@angular/core';
 
@Injectable({
  providedIn: 'root'
})
export class MapService {
 
  distance: number;
  temps: any;
 
  constructor() { }
 
  public calculerDistance(origin: string, dest: string) {
    return new google.maps.DistanceMatrixService()
    .getDistanceMatrix({'origins': [origin], 'destinations': [dest], travelMode: google.maps.TravelMode.DRIVING},
      (results: any) => {
        // console.log('distance entre les -- ', results.rows[0].elements[0].distance.value/1000);
        this.distance = results.rows[0].elements[0].distance.value/1000;
        this.temps = results.rows[0].elements[0].duration.value/60;
        console.log(this.distance);
        console.log(this.temps);
        // enregistrer le result sur le storage local de votre navigateur
        localStorage.setItem('distance', JSON.stringify(this.distance));
        localStorage.setItem('temps', JSON.stringify(this.temps));
      }
    );
  }
 
  public calculTarif () {
    if(this.distance < 5 ) {
      return '10€'
    }
    else if (this.distance > 5 && this.distance < 10 ) {
      return '20€'
    }
    else if (this.distance > 10 ) {
      return '30€'
    }
    else {
      return 'nous contacter'
    }
  }
}

calcul.component.ts

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
import { Component, NgZone, OnInit } from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { MapService } from '../services/map.service';
 
@Component({
  selector: 'app-calcul',
  templateUrl: './calcul.component.html',
  styleUrls: ['./calcul.component.css']
})
export class CalculComponent implements OnInit {
 
  form: any;
  pickupLoc: string;
  destLoc: string;
  distance: number;
  tarif: any;
 
  constructor(private ngZone: NgZone, private fb: FormBuilder, private mapService: MapService) { }
 
  ngOnInit(): void {
    this.form = this.fb.group({
      address1: [''],
      address2: ['']
    });
    this.initAutocomplete();
  }
 
  initAutocomplete() {
    let autocomplete = new google.maps.places.Autocomplete(document.getElementById('search_address') as HTMLInputElement);
    autocomplete.addListener("place_changed", () => {
      this.ngZone.run(() => {
        //retrouver les lieux
        let place: google.maps.places.PlaceResult = autocomplete.getPlace();
        // console.log('place is ', place);
        // this.form.address1 = place.formatted_address;
        this.pickupLoc = place.formatted_address
        //console.log('address 1 ', this.form.address1);
        this.form.patchValue({
          address1 : this.pickupLoc,
          address2: ""
        })
        //verify result
        if (place.geometry === undefined || place.geometry === null) {
          return;
        }
      })
    });
    let autocomplete1 = new google.maps.places.Autocomplete(document.getElementById('dest_address') as HTMLInputElement);
    autocomplete1.addListener("place_changed", () => {
      this.ngZone.run(() => {
        //retrouver les lieux de l'address 2
        let place1: google.maps.places.PlaceResult = autocomplete1.getPlace();
        this.destLoc = place1.formatted_address
        // console.log('pickup ', this.form.pickupLocation);
        this.form.patchValue({
          address1 : this.pickupLoc,
          address2: this.destLoc
        })
        //verify result
        if (place1.geometry === undefined || place1.geometry === null) {
          return;
        }
      })
    });
  }
 
  getDist(){
    this.mapService.calculerDistance(this.pickupLoc, this.destLoc);
    this.distance = this.mapService.distance;
    this.tarif = this.mapService.calculTarif();
    console.log(this.tarif);
 }
}

calcul.component.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<form [formGroup]="form">
 
  <div class="input-group">
   <input formControlName="address1"  id="search_address" type="text" required>
   <span class="highlight"></span>
   <span class="bar"></span>
   <label>Taper address 1</label>
 </div>
 
 <div class="input-group">
   <input formControlName="address2" id="dest_address" type="text" required>
   <span class="highlight"></span>
   <span class="bar"></span>
   <label>Taper address 2</label>
 </div>
 
 <button type="submit" (click)="getDist()">Calculer</button>
 
</form>
 
<h2>La distance est  <span>
 <strong>{{distance}}</strong>
</span></h2>

Merci pour votre aide

[krakatoa]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
  getDist(){
console.log('0000000000000000');
    this.mapService.calculerDistance(this.pickupLoc, this.destLoc);
console.log('22222222222222');
    this.distance = this.mapService.distance;
    this.tarif = this.mapService.calculTarif();
    console.log(this.tarif);
 }

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

  public calculerDistance(origin: string, dest: string) {
    return new google.maps.DistanceMatrixService()
    .getDistanceMatrix({'origins': [origin], 'destinations': [dest], travelMode: google.maps.TravelMode.DRIVING},
      (results: any) => {
console.log('11111111111111111');
        // console.log('distance entre les -- ', results.rows[0].elements[0].distance.value/1000);
        this.distance = results.rows[0].elements[0].distance.value/1000;
        this.temps = results.rows[0].elements[0].duration.value/60;
        console.log(this.distance);
        console.log(this.temps);
        // enregistrer le result sur le storage local de votre navigateur
        localStorage.setItem('distance', JSON.stringify(this.distance));
        localStorage.setItem('temps', JSON.stringify(this.temps));
      }
    );
  }

dans la console ça donne quoi ?

logiquement on devrait avoir :
000000000000000
111111111111111
222222222222222

si l'ordre est different tu va comprendre pourquoi

[angie13003]

effectivement je n'ai pas le bon ordre, j'ai
000000000
222222222
111111111

donc cela veut dire qu'il appel à mon service pas au bon moment ? Ou est ce que mon service est trop long à répondre ?

qu'est ce qu'il faudrait faire ?

[krakatoa]

il faut faire une promesse avec la fonction : calculerDistance

[angie13003]

alors j'ai commencé à construire ma fonction promise mais je ne suis absolument pas sur de moi. Je débute et je n'ai pas compris vraiment comment elle fonctionnait.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
  public calculerDistance(origin: string, dest: string) {
    let promise = new Promise((resolve, reject) => {
      return new google.maps.DistanceMatrixService()
      .getDistanceMatrix({'origins': [origin], 'destinations': [dest], travelMode: google.maps.TravelMode.DRIVING},
        (results: any) => {
          console.log('11111111111111111');
          // console.log('distance entre les -- ', results.rows[0].elements[0].distance.value/1000);
          this.distance = results.rows[0].elements[0].distance.value/1000;
          this.temps = results.rows[0].elements[0].duration.value/60;
          console.log(this.distance);
          console.log(this.temps);
          // enregistrer le result sur le storage local de votre navigateur
          localStorage.setItem('distance', JSON.stringify(this.distance));
          localStorage.setItem('temps', JSON.stringify(this.temps));
        }
      );
    })
  }

est ce que c'est bon ?

[krakatoa]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
  public calculerDistance(origin: string, dest: string) {
    let promise = new Promise((resolve, reject) => {
      return new google.maps.DistanceMatrixService()
      .getDistanceMatrix({'origins': [origin], 'destinations': [dest], travelMode: google.maps.TravelMode.DRIVING},
        (results: any) => {
          console.log('11111111111111111');
          // console.log('distance entre les -- ', results.rows[0].elements[0].distance.value/1000);
          this.distance = results.rows[0].elements[0].distance.value/1000;
          this.temps = results.rows[0].elements[0].duration.value/60;
          console.log(this.distance);
          console.log(this.temps);
          // enregistrer le result sur le storage local de votre navigateur
          localStorage.setItem('distance', JSON.stringify(this.distance));
          localStorage.setItem('temps', JSON.stringify(this.temps));

          resolve();         // déclenche la fin de la promesse
                                                                            // on peut aussi retourner des données    resolve(...données...);
        }
      );
    })
  }

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
  getDist(){
console.log('0000000000000000');
    this.mapService.calculerDistance(this.pickupLoc, this.destLoc).then ( res => {                          //    res contient les données si le resolve en fournie
        console.log('22222222222222');
        this.distance = this.mapService.distance;
        this.tarif = this.mapService.calculTarif();
        console.log(this.tarif);
    });
 }