Angular-google-maps: Layanan petunjuk arah

Pertanyaan yang sama untuk saya..

Bisakah kita menggunakan layanan petunjuk arah dengan angular2-google-maps ?

-> layanan petunjuk arah
-> contoh

Terima kasih banyak atas kerja samanya
-- Kris

Saya juga ingin tahu apakah ini sesuatu yang dapat saya akses. Saya sedang mengerjakan proyek yang agak berat yang membutuhkan salah satu peta untuk menunjukkan petunjuk arah yang disarankan Google antara dua lokasi. Tolong beri tahu saya jika saya telah melihat dokumentasi dan tidak menemukannya. Either way, proyek ini fantastis! Terima kasih atas kerja samanya @SebastianM

Arahan ini dapat menyelesaikan kebutuhan Anda

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

    });
  }
}

hai david, terima kasih atas arahannya, tetapi saya kesulitan memasukkannya ke dalam kode saya. Haruskah saya memasukkannya tepat di dom google map. Contohnya:
<sebm-google-map sebm-google-map-directions [origin=x] [destination=y][zoomControl]="false" [latitude]="lat" [longitude]="lng" (mapClick)="mapClicked($event)"> </sebm-google-map>

Saya mengalami kesulitan membuatnya bekerja, saya sebenarnya benar-benar baru di angular 2... terima kasih atas bantuan Anda

Hai @ahardworker , Ini cara yang benar:

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

di kelas pengontrol komponen Anda, Anda harus mendefinisikan properti ini.

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

Terima kasih! Bekerja. Tapi saya bertanya-tanya apakah mungkin menambahkan titik arah secara dinamis, lalu memperbarui arah tanpa menyegarkan halaman?

Sebenarnya inilah yang saya dapatkan:
Saya menambahkan ke komponen saya:

@ViewChild(DirectionsMapDirective) vc:DirectionsMapDirective;
dan kemudian saya cukup memanggil vc.updateDirections() dari komponen setiap kali titik jalan baru ditambahkan. Yang akan memanggil kembali kode dalam arahan. Apakah itu cara yang tepat untuk melakukannya?

Tentu @ahardworker , titik jalan adalah Array posisi, Anda dapat menambahkan logika pada arahan atau menyuntikkan array ini menggunakan parameter input.

Misalnya...

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

Pengarahan:

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

    });
  }
}

Halo @davidpestana
Saya mencoba memasukkan Directions-Directive tetapi saya mendapatkan kesalahan ini:
Can't bind to 'origin' since it isn't a known property of 'sebm-google-map-directions'.

(Saya tidak tahu, mengapa pemformatannya seburuk itu, tetapi saya harap Anda tetap membacanya)

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>

Komponen
`@Komponen({
pemilih: 'google-maps',
gaya: [memerlukan('./googleMaps.scss')],
templat: membutuhkan('./googleMaps.html'),
})
kelas ekspor GoogleMaps {
latHome: angka = 48.151839;
lngHome: nomor = 13.831726;
latComp: angka = 48.329500;
lngComp: angka = 14.319765;
titleComp: string = "dynatrace";
zoom: angka = 10;

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

asal = { bujur: 4.333, garis lintang: -1.2222 };
tujuan = { bujur: 22,311, lintang: -0,123 };
}`

Apakah saya harus mendaftarkan arahan di suatu tempat?

@ProkerBen Ya, Anda perlu mendaftarkan arahan dalam modul yang Anda gunakan sebagai deklarasi, sama seperti arahan lain yang Anda gunakan.

Ya @ProkerBen , bagaimana @lazarljubenovic berkata , Anda harus mendaftarkan arahan di modul Anda

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

@davidpestana DirectionsMapDirective menampilkan rute tetapi tidak memperbesar meskipun saya telah mengatur zoom=17

ini adalah properti google api, saat menggunakan DirectionsDisplayService, peta secara otomatis diperbesar untuk melihat semua titik arah. jika Anda menetapkan Nilai Zoom, itu akan diabaikan.

@davidpestana nih! Saya mencoba fungsi murni GMapSDK dan berfungsi dengan baik.

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

directionDisplay.setOptions({ melestarikanViewport: true }) memaksa peta menjaga nilai zoom

@davidpestana Hai,

Saya punya masalah dengan API. Saya menggunakan arahan seperti yang Anda tunjukkan di utas ini dan itu berfungsi sangat baik!
Satu-satunya masalah yang saya miliki adalah ketika saya harus menunjukkan rute baru di peta yang sama. Saya memanggil fungsi yang sama lagi dari Komponen induk dan mencetak rute baru di atas yang lama. Ini adalah kode yang saya miliki:
`
kelas ekspor DirectionsMapDirective {
@Input() tujuan tujuan: string;
@Input() asal: 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);
            }
        });

    });
}

}
`
Ketika saya perlu menunjukkan rute baru, komponen induk memanggil fungsi setMap dan variabel asal dan tujuan berubah.
Apakah ada cara untuk memuat ulang peta dari Komponen induk?

@davidpestana Saya juga mengalami masalah yang dijelaskan oleh okanok. Jika ada yang memiliki perbaikan untuk peta yang menampilkan semua rute tanpa mengatur ulang, itu akan sangat membantu.
@okanok apakah Anda pernah mengetahuinya?

Hai @davidpestana dan @ahardworker , saya mencoba menggunakan arahan dan HTML david yang ditentukan tetapi saya terus mendapatkan kesalahan ini "InvalidValueError: in property Origin: not a string; and not a LatLng atau LatLngLiteral: in property lat: not a number; dan properti yang tidak diketahui lat".

Komponen.ts
asal = { bujur: 4.333, garis lintang: -1.2222 }; // ini adalah contoh posisi aleatory
tujuan = { bujur: 22,311, lintang: -0,123 }; // ini adalah contoh posisi aleatory

Component.html

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

Kesalahan: InvalidValueError: di properti Asal: bukan string; dan bukan LatLng atau LatLngLiteral: di properti lat: bukan angka; dan properti yang tidak diketahui lat

Apakah Anda punya ide?

Terima kasih

@developernm Anda salah mengeja garis lintang ;)

@bene-starzengruber sedikit terburu-buru lol

Saya telah mengikuti topik ini dengan penuh minat. Dan saya berharap ini diintegrasikan ke dalam proyek (inti).

Saya juga tertarik saya perlu memiliki perencanaan rute dan arah api.

@davidpestana @ahardworker Telah mengimplementasikan Peta dengan Petunjuk Arah. Tapi saya mendapatkan beberapa Arah. Telah melampirkan Rute Peta saya. Bisakah Anda menyarankan Bagaimana cara mendapatkan rute tunggal setiap saat?.

Setiap kali Destionation Value berubah, saya akan memanggil My DirectionsMapDirective Directive.

Terima kasih sebelumnya.

@okanok @marimuthum17 ,
Setelah berjam-jam mencoba, saya pikir saya mendapat solusi untuk masalah ini... Di sini Anda dapat membaca bahwa perlu untuk menentukan arahDisplay global. Dengan mendefinisikan directionDisplay di dalam direktif, setiap kali akan membuat instance baru dari DirectionRenderer sehingga tidak dapat menghapus rute sebelumnya.

Jadi saya membuat DirectionRenderer di komponen saya.
if(this.directionsDisplay === undefined){ this.mapsAPILoader.load().then(() => { this.directionsDisplay = new google.maps.DirectionsRenderer; this.showDirective = true; }); }

Dan kemudian menyuntikkan dengan @Input() directionsDisplay; ke dalam arahan Anda.

Saya pikir itu tidak baik.. tapi berhasil..

@zuschy Anda telah melakukan PEKERJAAN HEBAT. Ia bekerja seperti pesona!!. Terima kasih atas bantuan Anda.

Perubahan yang saya lakukan adalah : @Input() directionDisplay: any; // Telah menambahkan tipe untuk input.

Anda menyelamatkan hari saya.

Dapatkah seseorang berbaik hati menulis ini sebagai contoh untuk dimasukkan ke dalam proyek?

@zuschy , @marimuthum17
Saya mencoba mengirim directionDisplay ke direktif melalui input seperti ini tetapi directionDisplay selalu tidak terdefinisi dalam direktif

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

di Komponen saya melakukan ini

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

dan dalam arahan

@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
Saya juga menghadapi masalah yang sama. arahTampilan menjadi tidak terdefinisi dalam arahan.

@manohar-nyros @Giusti
Di sini bagaimana saya mendeklarasikan Arahan Saya di Controller
@ViewChild(DirectionsMapDirective) vc: DirectionsMapDirective;
........ dan diakses seperti di bawah ini.
if(this.vc.directionsDisplay === undefined){ this.mapsAPILoader.load().then(() => {
this.vc.directionsDisplay = google.maps.DirectionsRenderer baru;
});

@bonzysalesman @Giusti @manohar-nyros

Saya telah membuat layanan petunjuk arah peta google di sudut 2 untuk salah satu proyek saya.
Di sini telah menulis satu artikel tentang ini, Anda dapat menemukan kode sumber lengkap
Di sini telah terlampir demo, Jika mau, Anda juga dapat mengunduh skrip. Berharap itu akan membantu orang lain juga.

@marimuthum17
Terima kasih banyak akan melihatnya, masalah lain adalah, bagaimana saya menambahkan bidang pelengkapan otomatis dalam ng-for katakanlah dalam contoh Anda, Anda akan memiliki tombol + dan bidang pencarian lain akan muncul. karena bidang pencarian harus terikat ke #pickupInput / #pickupoutput dan harus memiliki @Viewchild ?

@marimuthum17
Terima kasih atas dukungannya. Itu bekerja dengan baik untuk saya. Terima kasih banyak lagi.

@marimuthum17 , @zuschy
Hei arahannya berhasil sejauh ini tetapi saya mengalami masalah lain:

Ketika Pengguna menyeret Penanda saya dari Rute yang dihasilkan dan kemudian menambahkan Penanda ke Rute, penanda yang diseret melompat kembali ke titik awalnya (karena saya memanggil this.vc.updateDirections()) Saya pikir itu karena Asal dalam komponen tidak diperbarui ketika Saya mendengarkan "directions_changed" dalam arahan.

Saya mencoba membuat @Output di Directive tetapi sepertinya saya tidak dapat menggunakan Origin sebagai @Input dan @Output
Saya juga mencoba menempatkan pendengar di ngOnInit di Komponen tempat directionsDisplay dibuat tetapi entah bagaimana tidak terdefinisi di .addListener

Dan saya tidak yakin penanda apa yang diseret sehingga Ide saya adalah membuat kasus sakelar di Directions_changed Listener dan memeriksa apakah requestOrigin cocok dengan Asal/Tujuan atau 1 dari titik arah

Ini kode saya

Pengarahan

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

Komponen:

Di sini saya pada dasarnya memanggil this.vc.updateDirections(this.directionsDisplay); di Mapclicked / Autocomplete

Ketika saya mencoba Pendengar di sini seperti ini: (yang pertama jika setelah 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);
            });

        });

    }

Pertanyaan:

Saat ini berlangganan daftar di database. Saya menggunakan ngFor untuk membuat dan menghapus penanda saat ditambahkan atau dihapus dari database. Apakah ada cara saya dapat mengaitkan petunjuk arah dengan penanda tertentu dan kemudian menghapus petunjuk arah saat penanda dihapus dari peta?

Pada dasarnya, pengguna mengatakan mereka tersedia di aplikasi. Penanda muncul di peta dengan petunjuk arah ke lokasi. Ketika mereka mengatakan mereka tidak tersedia. Saya ingin penanda dan petunjuk arah yang terkait dengannya dihapus dari peta.

Saya juga melihat lokasi pengguna dengan watchPosition. Jelas ingin posisi penanda diperbarui serta petunjuk arah.

@davidpestana terima kasih atas pekerjaan yang brilian ... saya menerapkan arahan dasar tetapi memberi saya kesalahan "Permintaan petunjuk gagal karena ZERO_RESULTS" dapatkah saya membantu saya dengan kesalahan ini?

Saya juga menghadapi masalah ini, silakan periksa ini:

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

Tidak ada yang salah dengan kode.
Silakan periksa, Anda telah menambahkan kunci peta google Anda saat memanggil api. atau Sesuai google docs ada permintaan batas tertentu untuk setiap hari.

@marimuthum17 Anda benar tidak ada yang salah dalam kode Anda... Sebenarnya saya melewatkan bagian dari placeId... Saya tidak memberikan placeId dengan benar, itulah masalahnya...

@MartiniHenry1988 Anda mendapatkan masalah karena Anda tidak menggunakan layanan arahan dari google....silakan lihat komentar @marimuthum17 sebelumnya untuk contoh lengkap.

apakah ada yang berubah?, saya mendapatkan kesalahan di bawah ini pada baris directionsDisplay.setMap(map);

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

@kildareflare @amitdahan saya melihat bahwa kalian mungkin mengalami masalah yang sama, apakah Anda pernah menemukan perbaikan?

Saya menghadapi masalah ini juga. @chaoranxie sudahkah anda menemukan solusi?

Maaf, saya tahu subjeknya sudah agak lama tetapi saya mengalami masalah dan ini adalah kesalahannya:
Tidak dapat mengikat ke 'Asal' karena ini bukan properti yang diketahui dari 'sebm-google-map-directions'.
tetapi di atas memberikan solusi dan saya tidak jelas bagaimana melakukannya, dapatkah seseorang memberi saya contoh?

Maaf untuk bahasa Inggris saya yang buruk

@Fabian-Thug versi Angular apa yang Anda gunakan? Saya menggunakan 4* dan arahan bekerja secara berbeda.
Dalam Arahan ubah sintaks dari pemilih: 'sebm-google-map-directions' menjadi pemilih ['sebm-google-map-directions'] lalu di HTML tambahkan ke elemen alih-alih SEBAGAI elemen (contoh

@davidpestana @marimuthum17 Saya telah melakukan yang di atas. Sekarang ini menunjukkan arah antara lokasi pengguna saat ini dan tujuan yang dipilih.
Tapi saya perlu mengubah ikon penanda! Bagaimana cara melakukannya?
Bagaimana cara memasukkan penanda khusus dalam hasil arah?

@davidpestana
anda memberikan solusi ini import { CustomMapDirective } from '[your route to directive folder]/google-map.directive'; tetapi untuk ini apakah saya perlu menginstal beberapa paket ??

Mendapatkan ERROR TypeError: Tidak dapat mengatur properti 'asal' yang tidak ditentukan.

@ViewChild(DirectionsMapDirective) vc: DirectionsMapDirective;
asal publik : apapun ;
tujuan umum : apa saja;
konstruktor (
layanan modal pribadi: NgbModal,

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

) {}

Nilai kelulusan
this.vc.origin = { garis bujur: 77.333, garis lintang: 12.2222 };
this.vc.destination = { garis bujur: 90.311, garis lintang: 28.123 };
this.vc.updateDirections();

Terima kasih sebelumnya.

saya memiliki dua titik di peta saya, bagaimana saya bisa mendapatkan petunjuk arah di antara mereka?

komponen.ts

impor { Komponen } dari '@angular/core';
impor { MouseEvent } dari '@agm/core';

@Komponen({
pemilih: 'aplikasi-root',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
kelas ekspor AppComponent {
zoom: angka = 8;

lat: angka = 51.673858;
lng: angka = 7.815982;

penanda: penanda[] = [
{
lat: 51.673858,
lng: 7.815982,
label: 'A',
bisa diseret: benar
},
{
lat: 51.373858,
lng: 7.215982,
label: 'B',
bisa diseret: salah
}
]

}

penanda antarmuka {
lat: angka;
lng: nomor;
label?: tali;
dapat diseret: boolean;
}

@davidpestana ketika saya mencoba menggunakan kode Anda, saya mendapatkan kesalahan seperti
"Tidak dapat mengikat ke 'Asal' karena ini bukan properti yang diketahui dari 'sebm-google-map-directions'

1. Jika 'sebm-google-map-directions' adalah komponen Angular dan memiliki input 'Origin', maka verifikasi bahwa itu adalah bagian dari modul ini.
2. Jika 'sebm-google-map-directions' adalah Komponen Web, tambahkan 'CUSTOM_ELEMENTS_SCHEMA' ke '@NgModule.schemas' komponen ini untuk menyembunyikan pesan ini.
3. Untuk mengizinkan properti apa pun, tambahkan 'NO_ERRORS_SCHEMA' ke '@NgModule.schemas' komponen ini. ("
   

@davidpestana Mungkin perlu diperhatikan titik jalan Anda dapat didefinisikan sebagai respons dari API tempat, LatLng, atau seperti:

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

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

Ini semua bekerja untuk saya, terima kasih! Apakah ini layak ditambahkan ke agm/core jika formatnya sama dengan arahan lainnya?

Apakah ada pembaruan tentang ini?

Apakah mungkin menggunakan origin dan destination sebagai string?

alasan Anda tidak dapat mengakses perkiraan _waktu & jarak_ adalah karena blok kode ini di bawah. Ini adalah fungsi panggilan balik anonim, di mana ia tidak memiliki akses baca/tulis variabel this.xyz kelas.
}, function(response: any, status: any) {

saya dapat menyimpan info dan menggunakan layanan di dalam fungsi itu setelah saya mengubah ke bawah. ia menggunakan fungsi panah es6 yang asli untuk kelas TypeScript. info lebih lanjut di sini: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
}, (response: any, status: any) => {

Halo,
Dapatkah seseorang menunjukkan kepada saya cara membuat acara seperti klik mulai lokasi sebagai output dalam rute jalur arah.

Terima kasih

Hai @davidpestana , @marimuthum17 , @okanok

Saya menghadapi masalah baru seperti, ketika saya menggambar rute untuk pertama kalinya, ini ditampilkan dengan benar, Jika saya mencoba menggambar rute lain, yang pertama tidak dibersihkan dan untuk rute baru, garis tidak ditampilkan.

Ini kode saya,

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

Fungsi ini dipanggil setelah mengklik tombol oleh pengguna. dan html komponen,
<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>

Kode direktif adalah sebagai berikut,

````
import { Directive, Input, OnInit } from '@angular/core';
impor {GoogleMapsAPIWrapper} dari '@agm/core';

nyatakan biarkan google: apa saja;
@Pengarahan({
// tslint:disable-next-line:directive-selector
pemilih: 'appCycleDirection'
})
kelas ekspor CycleDirectionDirective mengimplementasikan OnInit {

@Masukan() org;
@Masukan() dst;
@Input() originPlaceId: apapun;
@Input() destinationPlaceId: apapun;
@Input() titik jalan: apapun;
@Input() arahTampilan: apa saja;
@Input() perkiraanWaktu: apa saja;
@Input() perkiraanJarak: sembarang;
konstruktor (gmapsApi pribadi: GoogleMapsAPIWrapper) { }

ngOnInit() {
console.log('Dalam arahan ');
console.log(ini.org);
this.gmapsApi.getNativeMap().then(map => {
const directionService = google.maps.DirectionsService baru;
const directionDisplay = google.maps.DirectionsRenderer baru;
arahDisplay.setMap(peta);
arahLayanan.rute({
asal: {lat: this.org.latitude, lng: this.org.longitude},
tujuan: {lat: this.dst.latitude, lng: this.dst.longitude},
titik jalan: [],
mengoptimalkanWaypoints: benar,
travelMode: 'TRANSIT'
}, fungsi(tanggapan, status) {
if (status === 'Oke') {
directionDisplay.setDirections(respon);
console.log(tanggapan);
} lain {
window.alert('Permintaan petunjuk arah gagal karena ' + status);
}
});

});

}

}

```

Apa yang salah dengan kode saya, saya ingin menghilangkan rute pertama ketika rute baru ditampilkan.

Hai, bisakah kita mengadakan acara klik di jalan?
Terima kasih

Saya telah menggunakan arahan yang sama dalam proyek saya dan berfungsi dengan baik, Hanya pertanyaan singkat, Apakah mungkin untuk menampilkan lalu lintas (bagian merah, kuning atau biru secara online) di jalan seperti di peta mengemudi Waze, Uber atau lyft?
bantuan Anda sangat dihargai

Orang ini telah melakukan pekerjaan yang sangat baik dengan arahan ini, saya telah mencobanya dan bekerja dengan sangat baik, harap pertimbangkan apakah itu dapat dimasukkan dalam AGM.

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

Masalah ini secara otomatis ditandai sebagai basi karena tidak ada aktivitas terbaru. Ini akan ditutup jika tidak ada aktivitas lebih lanjut yang terjadi. Terima kasih atas kontribusi Anda.