Angular-google-maps: Service d'itinéraire

Même question pour moi..

Pouvons-nous utiliser le service d'itinéraires avec angular2-google-maps ?

-> service d'itinéraire
-> exemple

Merci beaucoup pour votre travail
--Chris

Moi aussi j'aimerais savoir si c'est quelque chose auquel j'ai accès. Je travaille sur un projet plutôt cartographique qui nécessite l'une des cartes pour montrer les directions suggérées par Google entre deux emplacements. S'il vous plaît laissez-moi savoir si j'ai trop regardé la documentation et que je ne l'ai tout simplement pas trouvée. En tout cas, ce projet est fantastique ! Merci pour votre travail @SebastianM

Cette directive peut résoudre vos besoins

import {GoogleMapsAPIWrapper} from 'angular2-google-maps/core/services/google-maps-api-wrapper';
import { Directive,  Input} from '@angular/core';
declare var google: any;



@Directive({
  selector: 'sebm-google-map-directions'
})
export class DirectionsMapDirective {
  @Input() origin;
  @Input() destination;
  constructor (private gmapsApi: GoogleMapsAPIWrapper) {}
  ngOnInit(){
    this.gmapsApi.getNativeMap().then(map => {
              var directionsService = new google.maps.DirectionsService;
              var directionsDisplay = new google.maps.DirectionsRenderer;
              directionsDisplay.setMap(map);
              directionsService.route({
                      origin: {lat: this.origin.latitude, lng: this.origin.longitude},
                      destination: {lat: this.destination.latitude, lng: this.destination.longitude},
                      waypoints: [],
                      optimizeWaypoints: true,
                      travelMode: 'DRIVING'
                    }, function(response, status) {
                                if (status === 'OK') {
                                  directionsDisplay.setDirections(response);
                                } else {
                                  window.alert('Directions request failed due to ' + status);
                                }
              });

    });
  }
}

salut David, merci pour la directive, mais j'ai du mal à l'inclure dans mon code. Dois-je l'insérer directement dans le dom de google map. Par exemple:
<sebm-google-map sebm-google-map-directions [origin=x] [destination=y][zoomControl]="false" [latitude]="lat" [longitude]="lng" (mapClick)="mapClicked($event)"> </sebm-google-map>

J'ai du mal à le faire fonctionner, je suis en fait vraiment nouveau sur angular 2... merci pour votre aide

Salut @ahardworker , c'est la bonne façon:

<sebm-google-map>
  <sebm-google-map-directions [origin]="origin" [destination]="destination"></sebm-google-map-directions>
</sebm-google-map>

dans votre classe de contrôleur de composant, vous devez définir ces propriétés.

origin = { longitude: 4.333, lattitude: -1.2222 };  // its a example aleatory position
destination = { longitude: 22.311, lattitude: -0.123 };  // its a example aleatory position

Merci! Ça marche. Mais je me demande s'il est possible d'ajouter dynamiquement des waypoints, puis de mettre à jour la direction sans rafraîchir la page ?

En fait voici ce que j'ai :
J'ai ajouté à mon composant :

@ViewChild(DirectionsMapDirective) vc:DirectionsMapDirective;
puis j'appelle simplement vc.updateDirections() à partir du composant chaque fois qu'un nouveau point de cheminement est ajouté. Ce qui rappellera le code dans la directive. Est-ce la bonne façon de procéder ?

Bien sûr @ahardworker , les waypoints sont un tableau de positions, vous pouvez ajouter une logique à la directive ou injecter ce tableau à l'aide d'un paramètre d'entrée.

par exemple...

<sebm-google-map>
  <sebm-google-map-directions [origin]="origin" [destination]="destination" [waypoints]="waypoints"></sebm-google-map-directions>
</sebm-google-map>

Directif:

@Directive({
  selector: 'sebm-google-map-directions'
})
export class DirectionsMapDirective {
  @Input() origin;
  @Input() destination;
  @Input() waypoits;
  constructor (private gmapsApi: GoogleMapsAPIWrapper) {}
  ngOnInit(){
    this.gmapsApi.getNativeMap().then(map => {
              var directionsService = new google.maps.DirectionsService;
              var directionsDisplay = new google.maps.DirectionsRenderer;
              directionsDisplay.setMap(map);
              directionsService.route({
                      origin: {lat: this.origin.latitude, lng: this.origin.longitude},
                      destination: {lat: this.destination.latitude, lng: this.destination.longitude},
                      waypoints: waypoints,
                      optimizeWaypoints: true,
                      travelMode: 'DRIVING'
                    }, function(response, status) {
                                if (status === 'OK') {
                                  directionsDisplay.setDirections(response);
                                } else {
                                  window.alert('Directions request failed due to ' + status);
                                }
              });

    });
  }
}

Bonjour @davidpestana
J'ai essayé d'inclure la Directions-Directive mais j'obtiens cette erreur :
Can't bind to 'origin' since it isn't a known property of 'sebm-google-map-directions'.

(Je ne sais pas pourquoi le formatage est si mauvais mais j'espère que vous parviendrez à le lire quand même)

HTML
<sebm-google-map [latitude]="lat" [longitude]="lng" [zoom]="zoom"> <sebm-google-map-marker [latitude]="latHome" [longitude]="lngHome" [title]="'titleHome'"</sebm-google-map-marker> <sebm-google-map-marker [latitude]="latComp" [longitude]="lngComp" [title]="titleComp"</sebm-google-map-marker> <sebm-google-map-directions [origin]="origin" [destination]="destination"></sebm-google-map-directions> </sebm-google-map>

Composant
`@Composant({
sélecteur : 'google-maps',
styles : [require('./googleMaps.scss')],
modèle : require('./googleMaps.html'),
})
classe d'exportation GoogleMaps {
latHome : nombre = 48,151839 ;
lngHome : nombre = 13,831726 ;
latComp : nombre = 48,329500 ;
Complng : nombre = 14,319765 ;
titleComp: string = "dynatrace";
zoom : nombre = 10 ;

lat : nombre = (this.latComp + this.latHome) / 2 ;
lng : nombre = (this.lngComp + this.lngHome) / 2 ;

origine = { longitude : 4.333, latitude : -1.2222 } ;
destination = { longitude : 22.311, latitude : -0.123 } ;
}`

Dois-je enregistrer la directive quelque part ?

@ProkerBen Oui, vous devez enregistrer la directive dans le module que vous utilisez comme déclaration, comme toute autre directive que vous utilisez.

Oui @ProkerBen , comme le dit @lazarljubenovic , vous devez enregistrer la directive dans votre module

import { CustomMapDirective } from '[your route to directive folder]/google-map.directive';
...
@NgModule({
  imports: [...],
  exports: [..],
  declarations:[...,CustomMapDirective]
})

@davidpestana DirectionsMapDirective affiche l'itinéraire mais il ne zoome pas bien que j'aie défini zoom=17

c'est une propriété google api, lors de l'utilisation de DirectionsDisplayService, la carte zoome automatiquement afin d'afficher tous les points de cheminement. si vous définissez une valeur de zoom, elle sera ignorée.

@davidpestana toi ! J'ai essayé le pur func de GMapSDK et cela fonctionne bien.

}, function(response, status) {
  if (status === 'OK') {
    directionsDisplay.setOptions({ preserveViewport: true });
    directionsDisplay.setDirections(response);
  } else {
    window.alert('Directions request failed due to ' + status);
  }

directionsDisplay.setOptions({ preserveViewport: true }) force la carte à conserver la valeur de zoom

@davidpestana Salut,

J'ai un problème avec l'API. J'utilise la directive comme vous l'avez montré dans ce fil et cela fonctionne très bien!
Le seul problème que j'ai, c'est quand j'ai besoin d'afficher un nouvel itinéraire sur la même carte. J'appelle à nouveau la même fonction à partir du composant parent et il imprime la nouvelle route sur l'ancienne. Voici le code que j'ai :
`
classe d'exportation DirectionsMapDirective {
@Input() de stination:string;
@Input() origin:string;

constructor (private gmapsApi: GoogleMapsAPIWrapper) {

}

ngOnInit(){
    this.setMap();
}

setMap():void{
    this.gmapsApi.getNativeMap().then(map => {
        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer({draggable: true});
        directionsDisplay.setMap(map);
        directionsService.route({
            origin: this.origin,
            destination: this.destination,
            waypoints: [],
            optimizeWaypoints: true,
            travelMode: 'DRIVING'
        }, function(response, status) {
            if (status === 'OK') {
                directionsDisplay.setDirections(response);
            } else {
                window.alert('Directions request failed due to ' + status);
            }
        });

    });
}

}
`
Lorsque j'ai besoin d'afficher la nouvelle route, le composant parent appelle la fonction setMap et les variables d'origine et de destination changent.
Existe-t-il un moyen de recharger la carte à partir du composant parent ?

@davidpestana J'ai moi aussi le problème décrit par okanok. Si quelqu'un a un correctif pour la carte affichant tous les itinéraires sans réinitialiser, ce serait très utile.
@okanok avez-vous déjà compris cela

Salut @davidpestana et @ahardworker , j'ai essayé d'utiliser la directive et le HTML spécifié par David mais j'obtiens toujours cette erreur "InvalidValueError: in property origin: not a string; and not a LatLng or LatLngLiteral: in property lat: not a number; et propriété inconnue lat".

Composant.ts
origine = { longitude : 4.333, latitude : -1.2222 } ; // c'est un exemple de position aléatoire
destination = { longitude : 22.311, latitude : -0.123 } ; // c'est un exemple de position aléatoire

Composant.html

<sebm-google-map-directions [origin]="origin" [destination]="destination"></sebm-google-map-directions>

Erreur : InvalidValueError : dans l'origine de la propriété : pas une chaîne ; et pas un LatLng ou LatLngLiteral : dans la propriété lat : pas un nombre ; et propriété inconnue lat

Avez-vous une idée s'il vous plait ?

Merci

@developernm vous avez mal orthographié latitude ;)

@bene-starzengruber était un peu pressé lol

J'ai suivi ce sujet avec beaucoup d'intérêt. Et j'ai hâte que cela soit intégré au projet (core).

Je souhaite également avoir l'API de planification d'itinéraire et d'itinéraire.

@davidpestana @ahardworker Avoir implémenté la carte avec des directions. Mais je reçois plusieurs directions. J'ai joint ma carte d'itinéraire. Pouvez-vous s'il vous plaît suggérer comment obtenir un itinéraire unique à chaque fois ?.

Chaque fois que la valeur de destination change, j'appelle la directive My DirectionsMapDirective.

Merci d'avance.

@okanok @marimuthum17 ,
Après des heures d'essai, je pense avoir trouvé une solution à ce problème... Ici, vous pouvez lire qu'il est nécessaire de définir directionsDisplay global. En définissant directionsDisplay à l'intérieur de la directive, chaque fois créera une nouvelle instance de DirectionRenderer et ne pourra donc pas supprimer l'itinéraire précédent.

Je crée donc DirectionRenderer dans mon composant.
if(this.directionsDisplay === undefined){ this.mapsAPILoader.load().then(() => { this.directionsDisplay = new google.maps.DirectionsRenderer; this.showDirective = true; }); }

Et puis injectez-le avec @Input() directionsDisplay; dans votre directive.

Je pense que ce n'est pas bien... mais ça marche...

@zuschy Vous avez fait un GRAND TRAVAIL. Il fonctionne comme un charme!!. Merci pour ton aide.

Le changement que j'ai fait est : @Input() directionsDisplay: any; // Ont ajouté un type pour une entrée.

Vous avez sauvé ma journée.

Quelqu'un peut-il avoir la gentillesse d'écrire ceci comme exemple à intégrer dans le projet ?

@zuschy , @marimuthum17
J'ai essayé d'envoyer les directionsDisplay à la directive via une entrée comme celle-ci, mais les directionsDisplay sont toujours indéfinies dans la directive

<sebm-google-map-directions *ngIf="marker_count > 1" [directionsDisplay]="directionsDisplay" [waypointCnt]="waypointCnt" [origin]="origin" [destination]="destination" [waypoints]="waypoints"></sebm-google-map-directions>

dans le composant je fais ceci

 ngOnInit() {
        this.searchControl = new FormControl();
        this.setCurrentPosition();
        if(this.directionsDisplay === undefined){
            this.gmapsApi.getNativeMap().then(map => {               
                this.directionsDisplay = new google.maps.DirectionsRenderer({
                    draggable: true,
                    map: map,
                });
            });
        }

et dans la directive

@Input() directionsDisplay;

ngOnChanges(changes: SimpleChanges) {
        console.log('onChange fired');
        console.log('changing', changes);
        this.gmapsApi.getNativeMap().then(map => {
            var directionsService = new google.maps.DirectionsService;
            this.directionsDisplay.addListener('directions_changed', function() {
                computeTotalDistance(this.directionsDisplay.getDirections());
            });

            this.directionsDisplay.setMap(map);
            directionsService.route({
                origin: {lat: this.origin.latitude, lng: this.origin.longitude},
                destination: {lat: this.destination.latitude, lng: this.destination.longitude},
                waypoints: this.waypoints,
                optimizeWaypoints: true,
                travelMode: 'DRIVING'
            }, function(response, status) {
                if (status === 'OK') {
                    //directionsDisplay.setDirections({routes: []});
                    this.directionsDisplay.setDirections(response);
                } else {
                    window.alert('Directions request failed due to ' + status);
                }
            });

@zuschy @marimuthum17 @Giusti
Moi aussi confronté au même problème. directionsDisplay devenant indéfini dans la directive.

@manohar-nyros @Giusti
Voici comment j'ai déclaré ma directive dans le contrôleur
@ViewChild(DirectionsMapDirective) vc : DirectionsMapDirective ;
........ et accessible comme ci-dessous.
if(this.vc.directionsDisplay === non défini){ this.mapsAPILoader.load().then(() => {
this.vc.directionsDisplay = nouveau google.maps.DirectionsRenderer;
});

@bonzysalesman @Giusti @manohar-nyros

J'ai créé le service d'itinéraires google map en angulaire 2 pour l'un de mes projets.
Ici ont écrit un article à ce sujet, vous pouvez trouver le code sorce complet
Voici une démo ci-jointe, si vous le souhaitez, vous pouvez également télécharger le script. J'espère que cela aidera quelqu'un d'autre aussi.

@marimuthum17
Merci beaucoup d'y jeter un œil, un autre problème est de savoir comment ajouter des champs de saisie semi-automatique dans un ng-for, disons que dans votre exemple, vous auriez un bouton + et un autre champ de recherche apparaîtrait. puisque les champs de recherche doivent être liés au #pickupInput / #pickupoutput et doivent avoir un @Viewchild ?

@marimuthum17
Merci pour le soutien. Cela fonctionne bien pour moi. Merci beaucoup encore.

@marimuthum17 , @zuschy
Hé, la directive fonctionne très bien jusqu'à présent, mais j'ai rencontré un autre problème :

Lorsque l'utilisateur fait glisser un marqueur de la route générée, puis ajoute un marqueur à la route, le marqueur déplacé revient à son point de départ (parce que j'appelle this.vc.updateDirections()) je pense que c'est parce que l'origine du composant n'est pas mise à jour lorsque J'ai écouté les "directions_changed" dans la directive.

J'ai essayé de créer un @Output dans la directive mais il semble que je ne puisse pas utiliser l'origine comme @Input et @Output
J'ai également essayé de placer l'auditeur dans le ngOnInit du composant où le directionsDisplay est créé, mais il n'est pas défini dans le .addListener

Et je ne sais pas quel marqueur est déplacé, donc mon idée était de créer un boîtier de commutation dans l'écouteur directions_changed et de vérifier si le requestOrigin correspond à l'origine / destination ou à l'un des points de cheminement

voici mon code

Directif

export class DirectionsMapDirective {
    // get variables from map.component
    @Input() origin;
    @Input() destination;
    @Input() waypoints;
    @Input() waypointCnt;
    @Input() directionsDisplay;

    constructor (private gmapsApi: GoogleMapsAPIWrapper) {}

    // updateDirections has 2 optional parameters. gets called in map.component
    updateDirections(directionsDisplay, o?, d?){
        this.gmapsApi.getNativeMap().then(map => {
            var directionsService = new google.maps.DirectionsService;
            directionsDisplay.addListener('directions_changed', function() {
                //this.vc.computeTotalDistance(this.directionsDisplay.getDirections());

                if(directionsDisplay && directionsDisplay.dragResult){
                    let requestOrigin = directionsDisplay.dragResult.request.origin;
                    let requestDestination = directionsDisplay.dragResult.request.destination;
                    console.log(this.origin)
                    if(this.origin && (requestOrigin.lat.toString() == this.origin.latitude && requestOrigin.lng.toString() == this.origin.longitude)){
                        console.log('if?');
                        let temp_lat = requestDestination.lat.toString();
                        let temp_lng = requestDestination.lng.toString();
                        this.origin.latitude = temp_lat;
                        this.origin.longitude = temp_lng;
                        this.vc.updateDirections(directionsDisplay);
                    }
                }
                console.log(directionsDisplay);
            });


            //if origin / destination are undefined use value from optional parameters.
            directionsDisplay.setMap(map);
            if(!this.destination && d) {
                this.destination = d;
            }
            if(!this.origin && o) {
                this.origin = o;
            }

            // give the route the data, travel mode is driving bc users should plan a camping/ roadtrip.
            directionsService.route({
                origin: {lat: this.origin.latitude, lng: this.origin.longitude},
                destination: {lat: this.destination.latitude, lng: this.destination.longitude},
                waypoints: this.waypoints,
                optimizeWaypoints: true,
                travelMode: 'DRIVING'
            }, function(response, status) {
                console.log(status);
                if(status == 'OK'){
                    console.log('new route created')
                    var legs = response.routes[0].legs;
                    for (var i = 0; i < legs.length; i++) {
                        let inputFieldStart = document.getElementById('start') as HTMLInputElement;
                        let inputFieldDestination = document.getElementById('destination') as HTMLInputElement;
                        if(inputFieldStart.value == ''){
                            inputFieldStart.value = legs[i].start_address;
                        }
                        if(inputFieldDestination.value == ''){
                            inputFieldDestination.value = legs[i].end_address;
                        }
                    }
                    if (status === 'OK') {
                        directionsDisplay.setDirections(response);
                    } else {
                        window.alert('Directions request failed due to ' + status);
                    }
                }else{
                    console.log('keine Route möglich!')
                }
            });

            //function for displaying the travel distance
            function computeTotalDistance(result) {
                var total = 0;
                var myroute = result.routes[0];
                for (var i = 0; i < myroute.legs.length; i++) {
                    total += myroute.legs[i].distance.value;
                }
                total = total / 1000;
                document.getElementById('trip_length').innerHTML = 'The trip is <span id="trip_length_nr">' +total + '</span>km long.';
            }
        });
    }
}

Composant:

Ici, j'appelle essentiellement this.vc.updateDirections(this.directionsDisplay); sur Mapclicked / Autocomplete

Quand j'ai essayé le Listener ici comme ceci : (le premier if après addListener directionsDisplay = undefined)

ngOnInit() {


        this.searchControl = new FormControl();

        this.setCurrentPosition();

        this.mapsAPILoader.load().then(() => {
            this.geocoder = new google.maps.Geocoder;
            this.directionsDisplay = new google.maps.DirectionsRenderer({draggable: true});
            this.directionsDisplay.addListener('directions_changed', function() {
                //directionsDisplay = undefined?????
                if(this.directionsDisplay && this.directionsDisplay.dragResult){
                    let requestOrigin = this.directionsDisplay.dragResult.request.origin;
                    let requestDestination = this.directionsDisplay.dragResult.request.destination;
                    console.log(this.origin)
                    if(this.origin && (requestOrigin.lat.toString() == this.origin.latitude && requestOrigin.lng.toString() == this.origin.longitude)){
                        console.log('if?');
                        let temp_lat = requestDestination.lat.toString();
                        let temp_lng = requestDestination.lng.toString();
                        this.origin.latitude = temp_lat;
                        this.origin.longitude = temp_lng;
                        this.vc.updateDirections(this.directionsDisplay);
                    }
                }
                console.log(this.directionsDisplay);
            });
            let autocomplete = new google.maps.places.Autocomplete(this.OriginSearchElementRef.nativeElement, {
                types: ["address"]
            });
            let autocomplete2 = new google.maps.places.Autocomplete(this.DestinationSearchElementRef.nativeElement, {
                types: ["address"]
            });
            let autocomplete3 = new google.maps.places.Autocomplete(this.WaypointSearchElementRef.nativeElement, {
                types: ["address"]
            });

            autocomplete.addListener("place_changed", () => {
                this.addAutocomplete(autocomplete, 'origin');
            });
            autocomplete2.addListener("place_changed", () => {
                this.addAutocomplete(autocomplete2, 'destination');
                this.vc.updateDirections(this.directionsDisplay);
            });
            autocomplete3.addListener("place_changed", () => {
                this.addAutocomplete(autocomplete3, 'waypoint');
                this.vc.updateDirections(this.directionsDisplay);
            });

        });

    }

Question:

Actuellement abonné à la liste dans la base de données. J'utilise ngFor pour créer et supprimer des marqueurs lorsqu'ils sont ajoutés ou supprimés de la base de données. Existe-t-il un moyen d'associer des directions à des marqueurs particuliers, puis de supprimer les directions lorsque le marqueur est supprimé de la carte ?

Fondamentalement, l'utilisateur dit qu'ils sont disponibles dans l'application. Le marqueur apparaît sur la carte avec les directions vers l'emplacement. Quand ils disent qu'ils ne sont pas disponibles. Je veux que le marqueur et les directions qui lui sont associés soient supprimés de la carte.

Je surveille également l'emplacement de l'utilisateur avec watchPosition. Je veux évidemment mettre à jour la position du marqueur ainsi que les directions.

@davidpestana merci pour ce travail brillant... j'ai implémenté la directive de base mais cela me donne l'erreur "La demande de direction a échoué en raison de ZERO_RESULTS" peut m'aider avec cette erreur ?

Je suis également confronté à ce problème s'il vous plaît vérifier ceci:

https://github.com/SebastianM/angular-google-maps/issues/985

C'est rien de mal avec le code.
Veuillez vérifier que vous avez ajouté votre clé google map lors de l'appel de l'api. ou Selon google docs, il y a une certaine demande de limite pour chaque jour.

@ marimuthum17 vous avez raison, il n'y avait rien de mal dans votre code... En fait, j'ai raté une partie de placeId... Je ne fournissais pas correctement placeId, c'était le problème...

@MartiniHenry1988 vous rencontrez un problème car vous n'utilisez pas le service de direction de google.... veuillez vous référer au commentaire précédent de @marimuthum17 pour un exemple complet.

est-ce que quelque chose a changé ?, j'obtiens une erreur ci-dessous à la ligne directionsDisplay.setMap(map);

Argument of type 'GoogleMap' is not assignable to parameter of type 'Map'

@kildareflare @amitdahan je vois que vous avez peut-être rencontré le même problème, avez-vous déjà trouvé une solution ?

Je suis également confronté à ce problème. @chaoranxie as-tu trouvé une solution ?

Désolé, je sais que le sujet est déjà un peu ancien mais j'ai des problèmes et voici l'erreur :
Impossible de se lier à 'origin' car il ne s'agit pas d'une propriété connue de 'sebm-google-map-directions'.
mais ci-dessus a donné une solution et je ne sais pas comment le faire, quelqu'un pourrait-il me donner un exemple?

Désolé pour mon mauvais anglais

@Fabian-Thug quelle version d'Angular utilisez-vous ? Je suis sur 4* et les directives fonctionnent différemment.
Dans la directive, changez la syntaxe du sélecteur : 'sebm-google-map-directions' en sélecteur ['sebm-google-map-directions'] puis dans le code HTML, ajoutez-le À un élément au lieu de AS un élément (exemple

@davidpestana @marimuthum17 J'ai fait celui ci-dessus. Maintenant, il montre la direction entre l'emplacement actuel de l'utilisateur et la destination sélectionnée.
Mais je dois changer les icônes des marqueurs ! Comment faire ça?
Comment inclure des marqueurs personnalisés dans le résultat de direction ?

@davidpestana
vous donnez cette solution à l'importation { CustomMapDirective } de '[votre route vers le dossier de la directive]/google-map.directive'; mais pour cela dois-je installer un package ??

Obtention d'une ERREUR TypeError : Impossible de définir la propriété 'origine' non définie.

@ViewChild(DirectionsMapDirective) vc : DirectionsMapDirective ;
origine publique :toute ;
destination publique : quelconque ;
constructeur(
Service modal privé : NgbModal,

private mapsAPILoader: MapsAPILoader,
private ngZone: NgZone,
private gmapsApi: GoogleMapsAPIWrapper,
private _elementRef : ElementRef

) {}

Passage de valeurs
this.vc.origin = { longitude : 77,333, latitude : 12,2222 } ;
this.vc.destination = { longitude : 90,311, latitude : 28,123 } ;
this.vc.updateDirections();

Merci d'avance.

j'ai deux points sur ma carte, comment puis-je obtenir des directions entre eux ?

composant.ts

importer { Composant } de '@angular/core' ;
importer { MouseEvent } depuis '@agm/core' ;

@Composant({
sélecteur : 'app-root',
templateUrl : './app.component.html',
styleUrls : [ './app.component.css' ]
})
classe d'exportation AppComponent {
zoom : nombre = 8 ;

lat : nombre = 51,673858 ;
lng : nombre = 7.815982 ;

marqueurs : marqueur[] = [
{
latitude : 51.673858,
longueur: 7.815982,
étiquette : 'A',
déplaçable : vrai
},
{
latitude : 51.373858,
lng: 7.215982,
étiquette : 'B',
déplaçable : faux
}
]

}

marqueur d'interface {
lat : nombre ;
lng : nombre ;
étiquette ? : chaîne ;
déplaçable : booléen ;
}

@davidpestana quand j'essaie d'utiliser votre code,
"Impossible de se lier à 'origin' car il ne s'agit pas d'une propriété connue de 'sebm-google-map-directions"

1. Si 'sebm-google-map-directions' est un composant angulaire et qu'il a une entrée 'origin', vérifiez qu'il fait partie de ce module.
2. Si "sebm-google-map-directions" est un composant Web, ajoutez "CUSTOM_ELEMENTS_SCHEMA" au "@NgModule.schemas" de ce composant pour supprimer ce message.
3. Pour autoriser n'importe quelle propriété, ajoutez 'NO_ERRORS_SCHEMA' au '@NgModule.schemas' de ce composant. ("
   

@davidpestana Il vaut peut-être la peine de noter que vos points de cheminement peuvent être définis comme une réponse de l'API des lieux, LatLng ou similaire :

let waypoints = [
    {location: {placeId: place_id}}
];

https://developers.google.com/maps/documentation/javascript/directions#DirectionsRequests

Tout a fonctionné pour moi, merci ! Cela vaudrait-il la peine d'être ajouté à agm/core s'il était dans le même format que les autres directives ?

Y a-t-il une mise à jour à ce sujet?

Est-il possible d'utiliser origin et destination comme chaîne ?

la raison pour laquelle vous ne pouvez pas accéder à l'estimation _temps et distance_ est parce que ce bloc de code ci-dessous. Il s'agit d'une fonction de rappel anonyme, où elle n'a pas accès en lecture/écriture aux variables this.xyz de la classe.
}, function(response: any, status: any) {

J'ai pu stocker les informations et utiliser les services à l'intérieur de cette fonction après avoir changé ci-dessous. il utilise la fonction de flèche es6 native des classes dactylographiées. plus d'informations ici : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
}, (response: any, status: any) => {

Bonjour,
Quelqu'un peut-il me montrer comment créer un événement tel qu'un clic sur l'emplacement de départ en tant que sortie dans un itinéraire du chemin de direction.

Merci

Salut @davidpestana , @marimuthum17 , @okanok

Je suis confronté à un nouveau problème comme, lorsque je dessine un itinéraire pour la première fois, il s'affiche correctement, si j'essaie de dessiner un autre itinéraire, le premier n'est pas effacé et pour le nouvel itinéraire, la ligne ne s'affiche pas.

Voici mon code,

composant.ts,

showDirections( ) { if ('geolocation' in navigator) { navigator.geolocation.getCurrentPosition((position) => { this.org = { latitude: position.coords.latitude, longitude: position.coords.longitude}; this.dst = {longitude: this.cycle.longitude, latitude: this.cycle.latitude}; console.log('Src ' + this.org.latitude ); console.log('Dst' + this.dst.latitude ); }); } }

Cette fonction est appelée après avoir cliqué sur un bouton par l'utilisateur. et le html du composant,
<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom"> <appCycleDirection *ngIf="dst !== undefined" [org]="org" [dst]="dst"></appCycleDirection> <agm-marker [style.height.px]="map.offsetHeight" [latitude]="lat" [longitude]="lng"></agm-marker> </agm-map>

Le code de la directive est le suivant,

````
import { Directive, Input, OnInit } de '@angular/core';
importer {GoogleMapsAPIWrapper} depuis '@agm/core' ;

déclarer let google: any;
@Directif({
// tslint:disable-next-line:directive-selector
sélecteur : 'appCycleDirection'
})
classe d'exportation CycleDirectionDirective implémente OnInit {

@Input() org;
@Input() dst;
@Input() originPlaceId : any ;
@Input() destinationPlaceId : any ;
@Input() waypoints : tous ;
@Input() directionsDisplay : any ;
@Input() EstimateTime : any ;
@Input() EstimateDistance : any ;
constructeur (gmapsApi privé : GoogleMapsAPIWrapper) { }

ngOnInit() {
console.log(' Dans la directive ');
console.log(this.org);
this.gmapsApi.getNativeMap().then(map => {
const directionsService = new google.maps.DirectionsService;
const directionsDisplay = new google.maps.DirectionsRenderer;
directionsDisplay.setMap(carte);
directionsService.route({
origine : {lat : this.org.latitude, lng : this.org.longitude},
destination : {lat : this.dst.latitude, lng : this.dst.longitude},
points de cheminement : [],
optimiseWaypoints : vrai,
travelMode: 'TRANSIT'
}, fonction (réponse, état) {
if (statut === 'OK') {
directionsDisplay.setDirections(réponse);
console.log(réponse);
} autre {
window.alert('La demande d'itinéraire a échoué en raison de ' + status);
}
});

});

}

}

```

Quel est le problème avec mon code, je veux faire disparaître le premier itinéraire lorsqu'un nouvel itinéraire est affiché.

Bonjour, pouvons-nous mettre un événement clic sur la route ?
Merci

J'ai utilisé la même directive dans mon projet et cela fonctionne bien, Juste une petite question, est-il possible d'afficher le trafic (sections rouges, jaunes ou bleues en ligne) sur la route comme dans les cartes de conduite Waze, Uber ou Lyft ?
Votre aide est grandement appréciée

Ce type a fait un excellent travail avec cette directive, je l'ai essayé et cela fonctionne très bien, veuillez considérer si cela peut être inclus dans l'AGA.

https://github.com/explooosion/Agm-Direction

Ce problème a été automatiquement marqué comme obsolète car il n'a pas eu d'activité récente. Il sera fermé si aucune autre activité ne se produit. Merci pour vos contributions.