Angular-google-maps: Anfahrtsdienst

Gleiche Frage für mich..

Können wir den Wegbeschreibungsdienst mit angle2-google-maps nutzen?

-> Wegbeschreibungsdienst
-> Beispiel

Vielen Dank für deine Arbeit
-- Chris

Ich würde auch gerne wissen, ob ich darauf zugreifen kann. Ich arbeite an einem ziemlich kartenlastigen Projekt, bei dem eine der Karten erforderlich ist, um die von Google vorgeschlagenen Wegbeschreibungen zwischen zwei Standorten anzuzeigen. Bitte lassen Sie es mich wissen, wenn ich die Dokumentation überlesen und nicht gefunden habe. So oder so, dieses Projekt ist fantastisch! Danke für deine Arbeit @SebastianM

Diese Richtlinie kann Ihre Bedürfnisse lösen

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);
                                }
              });

    });
  }
}

Hey David, danke für die Anweisung, aber es fällt mir schwer, sie in meinen Code aufzunehmen. Soll ich es direkt in die Google Map dom einfügen. Zum Beispiel:
<sebm-google-map sebm-google-map-directions [origin=x] [destination=y][zoomControl]="false" [latitude]="lat" [longitude]="lng" (mapClick)="mapClicked($event)"> </sebm-google-map>

Es fällt mir schwer, es zum Laufen zu bringen, ich bin eigentlich ganz neu in Angular 2... danke für deine Hilfe

Hallo @ahardworker , Das ist der richtige Weg:

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

In Ihrer Komponenten-Controller-Klasse müssen Sie diese Eigenschaften definieren.

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

Vielen Dank! Es funktioniert. Aber ich frage mich, ob es möglich ist, Wegpunkte dynamisch hinzuzufügen und dann die Richtung zu aktualisieren, ohne die Seite zu aktualisieren?

Eigentlich habe ich folgendes bekommen:
Ich habe zu meiner Komponente hinzugefügt:

@ViewChild(DirectionsMapDirective) vc:DirectionsMapDirective;
und dann rufe ich einfach vc.updateDirections() aus der Komponente auf, wenn ein neuer Wegpunkt hinzugefügt wird. Dadurch wird der Code in der Direktive zurückgerufen. Ist es der richtige Weg?

Sicher @ahardworker , Wegpunkte ist ein Array von Positionen, Sie können der Direktive Logik hinzufügen oder dieses Array mithilfe eines Eingabeparameters einfügen.

zum Beispiel...

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

Richtlinie:

@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);
                                }
              });

    });
  }
}

Hallo @davidpestana
Ich habe versucht, die Directions-Directive einzufügen, aber ich erhalte diese Fehlermeldung:
Can't bind to 'origin' since it isn't a known property of 'sebm-google-map-directions'.

(Ich weiß nicht, warum die Formatierung so schlecht ist, aber ich hoffe, Sie können es trotzdem lesen)

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>

Komponente
`@Komponente({
Selektor: 'google-maps',
Stile: [require('./googleMaps.scss')],
Vorlage: require('./googleMaps.html'),
})
Exportklasse GoogleMaps {
latHome: Zahl = 48.151839;
lngHome: Zahl = 13.831726;
latComp: Zahl = 48,329500;
lngComp: Zahl = 14,319765;
titleComp: string = "dynatrace";
Zoom: Zahl = 10;

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

Ursprung = { Längengrad: 4.333, Breitengrad: -1.2222};
Ziel = { Längengrad: 22.311, Breitengrad: -0.123 };
}`

Muss ich die Richtlinie irgendwo registrieren?

@ProkerBen Ja, Sie müssen die Direktive in dem Modul registrieren, in dem Sie sie als Deklaration verwenden, genau wie jede andere Direktive, die Sie verwenden.

Ja @ProkerBen , wie @lazarljubenovic sagt, müssen Sie die Direktive in Ihrem Modul registrieren

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

@davidpestana DirectionsMapDirective zeigt die Route an, aber es wird nicht

Es ist eine Google-API-Eigenschaft, wenn DirectionsDisplayService verwendet wird, zoomt die Karte automatisch, um alle Wegpunkte anzuzeigen. Wenn Sie einen Zoomwert festlegen, wird dieser ignoriert.

@davidpestana ja ! Ich habe die reine Funktion von GMapSDK ausprobiert und es funktioniert gut.

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

DirectionsDisplay.setOptions({konserveViewport: true }) erzwinge, dass die Karte den Zoomwert beibehält

@davidpestana Hallo,

Ich habe ein Problem mit der API. Ich verwende die Direktive, wie Sie sie in diesem Thread gezeigt haben, und sie funktioniert sehr gut!
Das einzige Problem, das ich habe, ist, wenn ich eine neue Route auf derselben Karte anzeigen muss. Ich rufe dieselbe Funktion erneut von der übergeordneten Komponente auf und sie druckt die neue Route über die alte. Das ist der Code den ich habe:
`
Exportklasse 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);
            }
        });

    });
}

}
`
Wenn ich die neue Route anzeigen muss, ruft die übergeordnete Komponente die setMap-Funktion auf und die Ursprungs- und Zielvariablen ändern sich.
Gibt es eine Möglichkeit, die Karte von der übergeordneten Komponente neu zu laden?

@davidpestana Ich habe auch das von okanok beschriebene Problem. Wenn jemand eine Lösung für die Karte hat, die alle Routen ohne Zurücksetzen anzeigt, wäre dies sehr hilfreich.
@okanok hast du das jemals herausgefunden

Hallo @davidpestana und @ahardworker , ich habe versucht, die Direktive und den angegebenen HTML-

Komponente.ts
Ursprung = { Längengrad: 4.333, Breitengrad: -1.2222}; // es ist eine beispielhafte aleatorische Position
Ziel = { Längengrad: 22.311, Breitengrad: -0.123 }; // es ist eine beispielhafte aleatorische Position

Komponente.html

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

Fehler: InvalidValueError: im Eigenschaftsursprung: kein String; und kein LatLng oder LatLngLiteral: in der Eigenschaft lat: keine Zahl; und unbekanntes Eigentum lat

Hast du bitte eine Idee?

Danke

@developernm du hast Breitengrad falsch geschrieben ;)

@bene-starzengruber war etwas in Eile lol

Ich habe dieses Thema mit großem Interesse verfolgt. Und ich freue mich darauf, dass dies in das Projekt (Kern) integriert wird.

Ich bin auch daran interessiert, dass ich die Routenplanungs- und Wegbeschreibungs-API brauche.

@davidpestana @ahardworker Habe die Karte mit Wegbeschreibung implementiert. Aber ich bekomme mehrere Richtungen. Habe meine Map Route angehängt. Können Sie bitte vorschlagen, wie Sie jedes Mal eine einzelne Route erhalten?.

Jedes Mal, wenn sich der Zielwert ändert, rufe ich die Direktive My DirectionsMapDirective auf.

Danke im Voraus.

@okanok @marimuthum17 ,
Nach stundenlangen Versuchen denke ich, dass ich einen Workaround für dieses Problem gefunden habe... Hier können Sie lesen, dass es notwendig ist, DirectionsDisplay global zu definieren. Durch die Definition von directionDisplay innerhalb der Direktive wird jedes Mal eine neue Instanz von DirectionRenderer erstellt, sodass die vorherige Route nicht entfernt werden kann.

Also erstelle ich DirectionRenderer in meiner Komponente.
if(this.directionsDisplay === undefined){ this.mapsAPILoader.load().then(() => { this.directionsDisplay = new google.maps.DirectionsRenderer; this.showDirective = true; }); }

Und dann fügen Sie es mit @Input() directionsDisplay; in Ihre Anweisung ein.

Ich denke das ist nicht in Ordnung.. aber es funktioniert..

@zuschy Du hast einen GROSSEN JOB gemacht. Es wirkt wie ein Zauber!!. Danke für deine Hilfe.

Die Änderung, die ich gemacht habe, ist: @Input() directionDisplay: any; // Typ für eine Eingabe hinzugefügt.

Du hast meinen Tag gerettet.

Kann jemand so freundlich sein, dies als Beispiel für das Projekt zu schreiben?

@zuschy , @marimuthum17
Ich habe versucht, das DirectionsDisplay über eine solche Eingabe an die Direktive zu senden, aber das DirectionsDisplay ist in der Direktive immer undefiniert

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

in der Komponente mache ich das

 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,
                });
            });
        }

und in der Richtlinie

@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
Auch ich stehe vor dem gleichen Problem. DirectionsDisplay wird in der Direktive undefiniert.

@manohar-nyros @Giusti
Hier, wie ich meine Direktive in Controller deklariert habe
@ViewChild(DirectionsMapDirective) vc: DirectionsMapDirective;
........ und wie unten zugegriffen.
if(this.vc.directionsDisplay === undefined){ this.mapsAPILoader.load().then(() => {
this.vc.directionsDisplay = new google.maps.DirectionsRenderer;
});

@bonzysalesman @Giusti @manohar-nyros

Ich habe den Google Map Directions-Dienst in Winkel 2 für eines meiner Projekte erstellt.
Hier haben Sie einen Artikel darüber geschrieben, Sie können den vollständigen Quellcode finden
Hier haben Sie eine Demo angehängt. Wenn Sie möchten, können Sie das Skript auch herunterladen. Hoffe es hilft auch jemand anderem.

@marimuthum17
Vielen Dank, ich werde es mir ansehen, ein weiteres Problem ist, wie ich Autovervollständigungsfelder in einem ng-Forum hinzufügen würde, sagen wir, in Ihrem Beispiel hätten Sie eine Schaltfläche + und ein anderes Suchfeld würde erscheinen. da die Suchfelder an #pickupInput / #pickupoutput gebunden sein müssen und ein @Viewchild haben

@marimuthum17
Danke für die Unterstützung. Das funktioniert bei mir gut. Nochmals vielen Dank.

@marimuthum17 , @zuschy
Hey, die Direktive funktioniert bisher gut, aber ich bin auf ein anderes Problem gestoßen:

Wenn der Benutzer einen Marker aus der generierten Route zieht und dann einen Marker zur Route hinzufügt, springt der gezogene Marker zurück zu seinem Ausgangspunkt (weil ich this.vc.updateDirections()) aufrufe, denke ich, dass der Ursprung in der Komponente nicht aktualisiert wird, wenn Ich habe mir das "directions_changed" in der Direktive angehört.

Ich habe versucht, ein @Output in der Direktive zu erstellen, aber es scheint, dass ich den Ursprung nicht als @Input und @Output
Ich habe auch versucht, den Listener in ngOnInit in der Komponente zu platzieren, in der directionsDisplay erstellt wird, aber irgendwie wird er in .addListener undefiniert

Und ich bin mir nicht sicher, welcher Marker gezogen wird, also war meine Idee, einen Switch-Case im Directions_changed Listener zu erstellen und zu überprüfen, ob requestOrigin mit Start / Ziel oder einem der Wegpunkte übereinstimmt

Hier ist mein Code

Richtlinie

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.';
            }
        });
    }
}

Komponente:

Hier rufe ich im Grunde this.vc.updateDirections(this.directionsDisplay); auf Mapclicked / Autocomplete auf

Als ich den Listener hier so ausprobiert habe: (der erste wenn nach addListener directionDisplay = 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);
            });

        });

    }

Frage:

Derzeit abonniert die Liste in der Datenbank. Ich verwende ngFor, um Markierungen zu erstellen und zu entfernen, wenn sie der Datenbank hinzugefügt oder daraus gelöscht werden. Gibt es eine Möglichkeit, Wegbeschreibungen mit bestimmten Markierungen zu verknüpfen und die Wegbeschreibungen dann zu entfernen, wenn die Markierung von der Karte entfernt wird?

Grundsätzlich sagt der Benutzer, dass sie in der App verfügbar sind. Die Markierung wird auf der Karte mit Wegbeschreibung zum Standort angezeigt. Wenn sie sagen, dass sie nicht verfügbar sind. Ich möchte, dass die damit verbundene Markierung und Wegbeschreibung von der Karte entfernt wird.

Ich beobachte auch den Standort des Benutzers mit watchPosition. Natürlich möchten Sie, dass die Markerposition sowie die Wegbeschreibung aktualisiert werden.

@davidpestana danke für diese brillante Arbeit ... ich habe die grundlegende Direktive implementiert, aber es gibt mir den Fehler "Anfrage der Wegbeschreibung fehlgeschlagen aufgrund von ZERO_RESULTS". Kann mir bitte bei diesem Fehler helfen?

Ich stehe auch vor diesem Problem, bitte überprüfen Sie dies:

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

Das ist nichts falsch mit Code.
Bitte überprüfen Sie, ob Sie beim Aufrufen der API Ihren Google Map-Schlüssel hinzugefügt haben. oder Laut Google Docs gibt es für jeden Tag eine bestimmte Limitanforderung.

@marimuthum17 Sie haben

@ MartiniHenry1988 Sie erhalten ein Problem, weil Sie den Richtungsdienst von Google nicht verwenden .... Bitte beachten Sie den früheren Kommentar von

hat sich irgendwas geändert?, ich erhalte unten in der Zeile directionsDisplay.setMap(map);

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

@kildareflare @amitdahan Ich sehe, dass ihr vielleicht auf das gleiche Problem gestoßen seid , habt ihr jemals eine Lösung gefunden?

Ich stehe auch vor diesem Problem. @chaoranxie hast du eine Lösung gefunden?

Tut mir leid, ich weiß, das Thema ist schon etwas alt, aber ich habe Probleme und dies ist der Fehler:
Kann nicht an 'origin' gebunden werden, da es keine bekannte Eigenschaft von 'sebm-google-map-directions' ist.
aber oben gab eine lösung und mir ist nicht klar, wie es geht, könnte mir jemand ein beispiel geben?

Entschuldigung für mein schlechtes Englisch

@Fabian-Thug welche Version von Angular verwendest du? Ich bin auf 4* und Direktiven funktionieren anders.
Ändern Sie in der Direktive die Syntax von Selektor: 'sebm-google-map-directions' in Selektor ['sebm-google-map-directions'] und fügen Sie es dann im HTML zu einem Element anstelle von AS als Element hinzu (Beispiel

@davidpestana @marimuthum17 Ich habe das obige getan. Jetzt zeigt es die Richtung zwischen dem aktuellen Standort des Benutzers und dem ausgewählten Ziel an.
Aber ich muss die Markierungssymbole ändern! Wie geht das?
Wie füge ich benutzerdefinierte Markierungen in das Richtungsergebnis ein?

@davidpestana
Sie geben dieser Lösung import { CustomMapDirective } from '[Ihre Route zum Direktivenordner]/google-map.directive'; aber dafür muss ich ein Paket installieren??

Erhalten eines ERROR TypeError: Eigenschaft 'Ursprung' von undefined kann nicht gesetzt werden.

@ViewChild(DirectionsMapDirective) vc: DirectionsMapDirective;
öffentliche Herkunft :beliebig ;
öffentliches Ziel : beliebig;
Konstrukteur(
privater modalService : NgbModal,

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

) {}

Werte übergeben
this.vc.origin = { Längengrad: 77.333, Breitengrad: 12.2222};
this.vc.destination = { Längengrad: 90.311, Breitengrad: 28.123};
this.vc.updateDirections();

Danke im Voraus.

Ich habe zwei Punkte in meiner Karte, wie kann ich eine Wegbeschreibung zwischen ihnen erhalten?

Komponente.ts

import { Component } from '@angular/core';
import { MouseEvent } from '@agm/core';

@Komponente({
Selektor: 'app-root',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
Export-Klasse AppComponent {
Zoom: Zahl = 8;

Breite: Zahl = 51,673858;
Länge: Zahl = 7,815982;

Markierungen: Markierung[] = [
{
Breite: 51.673858,
Länge: 7.815982,
Etikett: 'A',
ziehbar: wahr
},
{
Breite: 51.373858,
Länge: 7.215982,
Etikett: 'B',
ziehbar: falsch
}
]

}

Schnittstellenmarkierung {
lat: Zahl;
Länge: Zahl;
Etikett?: Zeichenfolge;
ziehbar: boolesch;
}

@davidpestana Wenn ich versuche, deinen Code zu verwenden,
"Kann nicht an 'origin' gebunden werden, da es keine bekannte Eigenschaft von 'sebm-google-map-directions' ist"

1. Wenn 'sebm-google-map-directions' eine Angular-Komponente ist und sie eine 'origin'-Eingabe hat, überprüfen Sie, ob sie Teil dieses Moduls ist.
2. Wenn 'sebm-google-map-directions' eine Webkomponente ist, fügen Sie 'CUSTOM_ELEMENTS_SCHEMA' zu '@NgModule.schemas' dieser Komponente hinzu, um diese Meldung zu unterdrücken.
3. Um eine beliebige Eigenschaft zuzulassen, fügen Sie 'NO_ERRORS_SCHEMA' zu '@NgModule.schemas' dieser Komponente hinzu. ("
   

@davidpestana Es ist vielleicht erwähnenswert, dass Ihre Wegpunkte als Antwort von der Orte-API, LatLng oder ähnlichem definiert werden können:

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

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

Bei mir hat das alles funktioniert, danke! Würde es sich lohnen, dies zu agm/core hinzuzufügen, wenn es das gleiche Format wie die anderen Direktiven hätte?

Gibt es dazu ein Update?

Ist es möglich, origin und destination als String zu verwenden?

Der Grund, warum Sie nicht auf die Schätzung _Zeit & Entfernung_ zugreifen können, liegt an diesem Codeblock unten. Dies ist eine anonyme Callback-Funktion, bei der sie keinen Lese-/Schreibzugriff auf die this.xyz-Variablen der Klasse hat.
}, function(response: any, status: any) {

Ich konnte die Informationen speichern und Dienste in dieser Funktion verwenden, nachdem ich zu unten gewechselt hatte. Es verwendet die Pfeilfunktion es6, die in Typoskriptklassen nativ ist. mehr Infos hier: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
}, (response: any, status: any) => {

Hallo,
Kann mir jemand zeigen, wie man Ereignis wie Klickstartposition als Ausgabe in einer Route des Richtungspfades erstellt.

Vielen Dank

Hallo @davidpestana , @marimuthum17 , @okanok

Ich habe ein neues Problem wie, wenn ich zum ersten Mal eine Route zeichne, wird es richtig angezeigt. Wenn ich versuche, eine andere Route zu zeichnen, wird die erste nicht gelöscht und bei einer neuen Route wird die Linie nicht angezeigt.

Hier ist mein Code,

Komponente.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 ); }); } }

Diese Funktion wird aufgerufen, nachdem der Benutzer auf eine Schaltfläche geklickt hat. und HTML der Komponente,
<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>

Der Richtliniencode lautet wie folgt:

````
import { Direktive, Input, OnInit } from '@angular/core';
importiere {GoogleMapsAPIWrapper} aus '@agm/core';

deklarieren lassen google: any;
@Direktive({
// tslint:disable-next-line:directive-selector
Selektor: 'appCycleDirection'
})
Exportklasse CycleDirectionDirective implementiert OnInit {

@Input() org;
@Input() dst;
@Input() originPlaceId: any;
@Input() destinationPlaceId: any;
@Input() Wegpunkte: beliebig;
@Input() directionDisplay: any;
@Input() geschätzteZeit: beliebig;
@Input() geschätzte Distanz: beliebig;
Konstruktor(private gmapsApi: GoogleMapsAPIWrapper) { }

ngOnInit() {
console.log(' In Direktive ');
console.log(this.org);
this.gmapsApi.getNativeMap().then(map => {
const DirectionsService = new google.maps.DirectionsService;
const directionDisplay = new google.maps.DirectionsRenderer;
DirectionsDisplay.setMap(Karte);
routenService.route({
Herkunft: {lat: this.org.latitude, lng: this.org.longitude},
Ziel: {lat: this.dst.latitude, lng: this.dst.longitude},
Wegpunkte: [],
optimiereWegpunkte: wahr,
Reisemodus: 'TRANSIT'
}, Funktion (Antwort, Status) {
if (status === 'OK') {
DirectionsDisplay.setDirections(Antwort);
console.log (Antwort);
} anders {
window.alert('Anfrage der Wegbeschreibung fehlgeschlagen wegen ' + Status);
}
});

});

}

}

```

Was mit meinem Code nicht stimmt, ich möchte die erste Route verschwinden lassen, wenn eine neue Route angezeigt wird.

Hallo, können wir ein Klick-Event auf die Straße bringen?
Vielen Dank

Ich habe die gleiche Direktive in meinem Projekt verwendet und es funktioniert gut. Nur eine kurze Frage: Ist es möglich, den Verkehr (rote, gelbe oder blaue Abschnitte online) auf der Straße wie in Waze-, Uber- oder Lyft-Fahrkarten anzuzeigen?
Deine Hilfe wird hoch geschätzt

Dieser Typ hat mit dieser Richtlinie hervorragende Arbeit geleistet, ich habe sie ausprobiert und sie funktioniert sehr gut, bitte überlegen Sie, ob sie in die Hauptversammlung aufgenommen werden kann.

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

Dieses Problem wurde automatisch als veraltet markiert, da es in letzter Zeit keine Aktivität hatte. Es wird geschlossen, wenn keine weitere Aktivität stattfindet. Vielen Dank für Ihre Beiträge.