Angular-google-maps: خدمة الاتجاهات

نفس السؤال بالنسبة لي ..

هل يمكننا استخدام خدمة الاتجاهات مع خرائط google-angular2؟

-> خدمة الاتجاهات
-> مثال

شكرا جزيلا لك على عملك
- كريس

أود أيضًا أن أعرف ما إذا كان هذا شيء يمكنني الوصول إليه. أنا أعمل على مشروع خريطة ثقيل نوعًا ما يتطلب إحدى الخرائط لإظهار الاتجاهات المقترحة من Google بين موقعين. يرجى إعلامي إذا كنت قد بحثت في المستندات ولم أجدها. في كلتا الحالتين ، هذا المشروع رائع! شكرا لعملكمSebastianM

هذا التوجيه يمكن أن يحل احتياجاتك

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

    });
  }
}

مرحبًا ديفيد ، شكرًا على التوجيه ، لكنني أجد صعوبة في تضمينه في الكود الخاص بي. هل يجب إدراجه مباشرة في خريطة google dom. على سبيل المثال:
<sebm-google-map sebm-google-map-directions [origin=x] [destination=y][zoomControl]="false" [latitude]="lat" [longitude]="lng" (mapClick)="mapClicked($event)"> </sebm-google-map>

أواجه صعوبة في جعلها تعمل ، فأنا جديد حقًا على Angular 2 ... شكرًا على مساعدتك

مرحبًا ahardworker ، هذه هي الطريقة الصحيحة:

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

في فئة وحدة التحكم الخاصة بك ، يجب تحديد هذه الخصائص.

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

شكرا! انها تعمل. لكنني أتساءل هل من الممكن إضافة نقاط مسار ديناميكيًا ، ثم تحديث الاتجاه دون تحديث الصفحة؟

في الواقع هذا ما حصلت عليه:
أضفت إلى المكون الخاص بي:

@ViewChild(DirectionsMapDirective) vc:DirectionsMapDirective;
ثم أستدعي ببساطة vc.updateDirections () من المكون كلما تمت إضافة إحداثية جديدة. والذي سيعيد الاتصال بالرمز الموجود في التوجيه. هل هي الطريقة الصحيحة للقيام بذلك؟

بالتأكيد ahardworker ، نقاط الطريق هي مصفوفة من المواضع ، يمكنك إضافة منطق في التوجيه أو إدخال هذه المصفوفة باستخدام معلمة إدخال.

على سبيل المثال...

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

التوجيه:

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

    });
  }
}

مرحبا @ davidpestana
حاولت تضمين التوجيهات ولكني أتلقى هذا الخطأ:
Can't bind to 'origin' since it isn't a known property of 'sebm-google-map-directions'.

(لا أعرف ، لماذا التنسيق بهذا السوء ولكن أتمنى أن تتمكن من قراءته على أي حال)

لغة البرمجة
<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>

مكون
Component ({
المحدد: "خرائط جوجل" ،
الأنماط: [تتطلب ('./ googleMaps.scss')] ،
النموذج: يتطلب ("./ googleMaps.html") ،
})
تصدير فئة GoogleMaps {
خط الطول: الرقم = 48.151839 ؛
lngHome: الرقم = 13.831726 ؛
latComp: الرقم = 48.329500 ؛
lngComp: الرقم = 14.319765 ؛
titleComp: سلسلة = "dynatrace"؛
التكبير: الرقم = 10 ؛

خط الطول: الرقم = (this.latComp + this.latHome) / 2 ؛
lng: number = (this.lngComp + this.lngHome) / 2 ؛

الأصل = {خط الطول: 4.333 ، خط العرض: -1.2222} ؛
الوجهة = {خط الطول: 22.311 ، خط العرض: -0.123} ؛
} `

هل يجب علي تسجيل التوجيه في مكان ما؟

ProkerBen نعم ، أنت بحاجة إلى تسجيل التوجيه في الوحدة النمطية التي تستخدمها

نعم ProkerBen ، كيف قال lazarljubenovic ، يجب عليك تسجيل التوجيه في الوحدة النمطية الخاصة بك

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

يعرض دليل خرائطdavidpestana المسار ولكنه لا يتم تكبيره على الرغم من أنني قمت بتعيين التكبير = 17

إنها إحدى خصائص google api ، عند استخدام الاتجاهات ، يتم تكبير الخريطة تلقائيًا لعرض جميع الإحداثيات. إذا قمت بتعيين قيمة تكبير ، فسيتم تجاهلها.

تضمين التغريدة لقد جربت func الخالص لـ GMapSDK وهو يعمل بشكل جيد.

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

directionDisplay.setOptions ({saveViewport: true}) تفرض الخريطة تحافظ على قيمة التكبير / التصغير

davidpestana مرحبا ،

لدي مشكلة مع API. أستخدم التوجيه كما أظهرته في هذا الموضوع وهو يعمل بشكل جيد جدًا!
المشكلة الوحيدة التي أواجهها هي عندما أحتاج إلى إظهار طريق جديد على نفس الخريطة. أقوم باستدعاء نفس الوظيفة مرة أخرى من المكون الرئيسي ويقوم بطباعة المسار الجديد على المسار القديم. هذا هو الكود الذي أملكه:
"
تصدير فئة الاتجاهات ، خريطة التوجيه {
Input () de stination: سلسلة ؛
Input () الأصل: سلسلة ؛

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

    });
}

}
"
عندما أحتاج إلى إظهار المسار الجديد ، فإن المكون الرئيسي يستدعي وظيفة setMap وتتغير متغيرات الأصل والوجهة.
هل هناك طريقة لإعادة تحميل الخريطة من المكون الأصلي؟

davidpestana أنا أيضًا أواجه المشكلة التي وصفها okanok. إذا كان لدى أي شخص إصلاح للخريطة تعرض جميع المسارات دون إعادة تعيينها ، فسيكون ذلك مفيدًا للغاية.
okanok هل

مرحبًا davidpestana و ahardworker ، لقد حاولت استخدام التوجيه و HTML المحدد ديفيد ولكني ما زلت أتلقى هذا الخطأ "InvalidValueError: في أصل الخاصية: ليس سلسلة ؛ وليس LatLng أو LatLngLiteral: في الخاصية lat: ليس رقمًا ؛ وخاصية غير معروفة lat.

مكونات
الأصل = {خط الطول: 4.333 ، خط العرض: -1.2222} ؛ // إنه مثال على موقف متغير
الوجهة = {خط الطول: 22.311 ، خط العرض: -0.123} ؛ // إنه مثال على موقف متغير

Component.html

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

خطأ: InvalidValueError: في أصل الخاصية: ليس سلسلة ؛ وليس LatLng أو LatLngLiteral: في الخاصية lat: ليس رقمًا ؛ وممتلكات غير معروفة لات

هل لديك اي فكرة من فضلك؟

شكرا

developernm لقد

@ كان bene-starzengruber قليلا في عجلة من أمره لول

لقد كنت أتابع هذا الموضوع باهتمام كبير. وأنا أتطلع إلى دمج هذا في المشروع (الأساسي).

أنا أيضًا مدروس أحتاج إلى وجود واجهة برمجة تطبيقات لتخطيط المسار والاتجاهات.

davidpestanaahardworker نفذت خريطة مع الاتجاهات. لكني أحصل على اتجاهات متعددة. قمت بإرفاق مسار الخرائط الخاص بي. هل يمكنك اقتراح كيفية الحصول على طريق واحد في كل مرة ؟.

في كل مرة تتغير قيمة الوجهة ، سأتصل بالتوجيه التوجيهي الخاص بي.

شكرا لك مقدما.

okanok @ marimuthum17 ،
بعد ساعات من المحاولة ، أعتقد أنني حصلت على حل بديل لهذه المشكلة ... هنا يمكنك أن تقرأ أنه من الضروري تحديد الاتجاهاتعرض عالمي. من خلال تحديد الاتجاهاتعرض داخل التوجيه ، سيتم في كل مرة إنشاء مثيل جديد من DirectionRenderer وبالتالي لا يمكنه إزالة المسار السابق.

لذلك قمت بإنشاء DirectionRenderer في المكون الخاص بي.
if(this.directionsDisplay === undefined){ this.mapsAPILoader.load().then(() => { this.directionsDisplay = new google.maps.DirectionsRenderer; this.showDirective = true; }); }

ثم قم بحقنها بـ @Input() directionsDisplay; في توجيهك.

أعتقد أن هذا ليس جيدًا .. ولكنه يعمل ..

zuschy لقد قمت بعمل رائع. أنه يعمل مثل السحر!!. شكرا لمساعدتك.

التغيير الذي قمت به هو:Input () directionDisplay: أي ؛ // أضفت نوعًا للإدخال.

لقد أنقذت يومي.

هل يمكن لشخص أن يكون لطيفًا بحيث يكتب هذا كمثال ليتم دمجه في المشروع؟

zuschy ،
حاولت إرسال التوجيهاتعرض إلى التوجيه عبر إدخال مثل هذا ولكن التوجيهاتعرض دائمًا غير محدد في التوجيه

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

في المكون أفعل هذا

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

وفي التوجيه

@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 @ marimuthum17Giusti
أنا أيضا أواجه نفس المشكلة. الاتجاهاتعرض الحصول على عرض غير محدد في التوجيه.

تضمين التغريدة
هنا كيف أعلنت توجيهي في وحدة التحكم
ViewChild (directionMapDirective) vc: directionMapDirective ؛
........ ويمكن الوصول إليها مثل بيو.
إذا (this.vc.directionsDisplay === undefined) {this.mapsAPILoader.load (). ثم (() => {
this.vc.directionsDisplay = new google.maps.DirectionsRenderer ؛
}) ؛

bonzysalesmanGiusti @ مانوهار-nyros

لقد أنشأت خدمة اتجاهات خرائط Google في الزاوية 2 لأحد مشروعي.
لقد كتبت هنا مقالًا واحدًا حول هذا الموضوع ، يمكنك العثور على رمز sorce كامل
أرفق هنا العرض التوضيحي ، إذا كنت تريد يمكنك تنزيل البرنامج النصي أيضًا. اتمنى ان يساعد شخص اخر ايضا

@ marimuthum17
شكرًا جزيلاً لك ، سنلقي نظرة على الأمر ، هناك مشكلة أخرى ، وهي كيف يمكنني إضافة حقول الإكمال التلقائي في ng-for دعنا نقول في مثالك أنه سيكون لديك زر + وسيظهر حقل بحث آخر. نظرًا لأن حقول البحث يجب أن تكون مرتبطة بـ #pickupInput / #pickupoutput ويجب أن يكون لها Viewchild ؟

@ marimuthum17
شكرا على الدعم. هذا يعمل بشكل جيد بالنسبة لي. شكرا جزيلا مرة أخرى.

@ marimuthum17،zuschy
مرحبًا ، يعمل التوجيه بشكل رائع حتى الآن ولكني واجهت مشكلة أخرى:

عندما يسحب المستخدم am Marker من المسار الذي تم إنشاؤه ثم يضيف علامة إلى المسار ، فإن العلامة المسحوبة تقفز مرة أخرى إلى نقطة البداية (لأنني أتصل بـ this.vc.updateDirections()) أعتقد أنه بسبب عدم تحديث الأصل في المكون عندما أستمع إلى "direction_changed" في التوجيه.

حاولت إنشاء @Output في التوجيه ولكن يبدو أنني لا أستطيع استخدام الأصل كـ @Input و @Output
حاولت أيضًا وضع المستمع في ngOnInit في المكون حيث يتم إنشاء directionsDisplay ولكن بطريقة ما يتم تحديده في .addListener

ولست متأكدًا من العلامة التي تم سحبها ، لذا كانت فكرتي هي إنشاء حالة تبديل في مستمع الاتجاهات المتغير والتحقق مما إذا كان requestOrigin يطابق الأصل / الوجهة أو 1 من نقاط المسار

هيريس رمز بلدي

التوجيه

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

مكون:

هنا أتصل بشكل أساسي بـ this.vc.updateDirections(this.directionsDisplay); على Mapclicked / Autocomplete

عندما جربت المستمع هنا مثل هذا: (الأول إذا كان بعد اتجاهات addListenerDisplay = غير محدد)

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

        });

    }

سؤال:

الاشتراك حاليا في القائمة في قاعدة البيانات. أنا أستخدم ngFor لإنشاء وإزالة العلامات عند إضافتها أو حذفها من قاعدة البيانات. هل هناك طريقة يمكنني من خلالها ربط الاتجاهات بعلامات معينة ثم إزالة الاتجاهات عند إزالة العلامة من الخريطة؟

في الأساس ، يقول المستخدم إنهم متاحون في التطبيق. يظهر المحدد على الخريطة مع الاتجاهات إلى الموقع. عندما يقولون أنهم غير متاحين. أريد إزالة العلامة والاتجاهات المرتبطة بها من الخريطة.

كما أنني أشاهد موقع المستخدم باستخدام watchPosition. من الواضح أنك تريد تحديث موضع العلامة بالإضافة إلى الاتجاهات.

davidpestana شكرًا لك على هذا العمل الرائع ...

أواجه هذه المشكلة أيضًا ، يرجى التحقق من هذا:

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

هذا ليس خطأ في الكود.
يرجى التحقق من أنك أضفت مفتاح خريطة جوجل الخاص بك أثناء الاتصال بواجهة برمجة التطبيقات. أو وفقًا لمُحرر مستندات google ، هناك طلب حد ثابت لكل يوم.

@ marimuthum17 أنت محق ، لم يكن هناك شيء خاطئ في الكود الخاص بك ... في الواقع فاتني جزء من placeId ... لم أكن أقدم مكانًا بشكل صحيح ، كانت هذه هي المشكلة ...

@ MartiniHenry1988 تواجهك مشكلة لأنك لا تستخدم خدمة التوجيه من google .... يرجى الرجوع إلى تعليق @ marimuthum17 السابق للحصول على مثال كامل.

هل تغير أي شيء؟ ، يظهر لي خطأ أدناه على السطر directionsDisplay.setMap(map);

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

kildareflareamitdahan أرى أن يا رفاق قد واجهت نفس المشكلة، هل وجدت من أي وقت مضى الإصلاح؟

أنا أواجه هذه المشكلة أيضًا. chaoranxie هل وجدت الحل؟

عذرًا ، أعرف أن الموضوع قديم بعض الشيء ولكني أواجه مشكلات وهذا هو الخطأ:
لا يمكن الارتباط بـ "origin" لأنها ليست خاصية معروفة لـ "sebm-google-map-direction".
ولكن أعلاه أعطاني حلاً ولست واضحًا في كيفية القيام بذلك ، فهل يمكن لشخص ما أن يعطيني مثالاً؟

اسف على سوء لغتي الانجليزية

@ Fabian-Thug ما هو إصدار Angular الذي تستخدمه؟ أنا على 4 * وتعمل التوجيهات بشكل مختلف.
في التوجيه ، قم بتغيير البنية من المحدد: 'sebm-google-map-direction' إلى المحدد ['sebm-google-map-direction'] ثم أضفه في HTML إلى عنصر بدلاً من عنصر AS (مثال

davidpestana @ marimuthum17 لقد فعلت ما سبق. الآن يظهر الاتجاه بين الموقع الحالي للمستخدم والوجهة المحددة.
لكني أحتاج إلى تغيير أيقونات العلامة! كيف يتم فعل ذلك؟
كيف يتم تضمين العلامات المخصصة في نتيجة الاتجاه؟

تضمين التغريدة
أنت تعطي هذا الحل استيراد {CustomMapDirective} من '[مسارك إلى مجلد التوجيه] /google-map.directive' ؛ ولكن لهذا أحتاج إلى تثبيت بعض الحزمة ؟؟

الحصول على خطأ في النوع "خطأ في النوع": لا يمكن تعيين خاصية "أصل" من غير معرف.

ViewChild (directionMapDirective) vc: directionMapDirective ؛
الأصل العام: أي ؛
الوجهة العامة: أي ؛
البناء(
خدمة الوسائط الخاصة: NgbModal ،

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

) {}

القيم العابرة
this.vc.origin = {خط الطول: 77.333 ، خط العرض: 12.2222} ؛
this.vc.destination = {خط الطول: 90.311 ، خط العرض: 28.123} ؛
this.vc.updateDirections () ،

شكرا لك مقدما.

لدي نقطتان في خريطتي ، كيف يمكنني الحصول على الاتجاهات بينهما؟

المكونات

استيراد {مكون} من "@ angular / core" ؛
استيراد {MouseEvent} من "@ agm / core" ؛

@مكون({
المحدد: "app-root" ،
templateUrl: "./app.component.html" ،
styleUrls: ['./app.component.css']
})
فئة التصدير AppComponent {
التكبير: الرقم = 8 ؛

خط العرض: الرقم = 51.673858 ؛
lng: الرقم = 7.815982 ؛

محددات: علامة [] = [
{
خط العرض: 51.673858 ،
lng: 7.815982 ،
التسمية: "أ" ،
السحب: صحيح
} ،
{
خط العرض: 51.373858 ،
lng: 7.215982 ،
التسمية: "ب" ،
السحب: خطأ
}
]

}

محدد الواجهة {
خط الطول: رقم ؛
lng: رقم ؛
التسمية ؟: سلسلة ؛
قابل للسحب: منطقي ؛
}

davidpestana عندما أحاول استخدام الرمز الخاص بك ، أتلقى خطأ مثل
"لا يمكن الارتباط بـ" origin "لأنها ليست خاصية معروفة لـ" sebm-google-map-direction "

1. إذا كان "sebm-google-map-direction" مكونًا زاوية وله إدخال "أصل" ، فتأكد من أنه جزء من هذه الوحدة.
2. إذا كان "sebm-google-map-direction" أحد مكونات الويب ، فقم بإضافة "CUSTOM_ELEMENTS_SCHEMA" إلى "@ NgModule.schemas" لهذا المكون لمنع هذه الرسالة.
3. للسماح بأية خاصية ، أضف "NO_ERRORS_SCHEMA" إلى "@ NgModule.schemas" لهذا المكون. ("
   

davidpestana قد يكون من الجدير ملاحظة أنه يمكن تعريف نقاط

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

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

كل هذا يعمل معي ، شكرا لك! هل يستحق هذا الإضافة إلى agm / core إذا كان بنفس تنسيق التوجيهات الأخرى؟

هل هناك أي تحديث حول هذا؟

هل من الممكن استخدام origin و destination كسلسلة؟

السبب في أنك لا تستطيع الوصول إلى تقدير الوقت والمسافة هو أن هذا الكود أدناه. هذه وظيفة رد اتصال مجهولة ، حيث لا تملك حق الوصول للقراءة / الكتابة لمتغيرات الفئة this.xyz.
}, function(response: any, status: any) {

تمكنت من تخزين المعلومات واستخدام الخدمات داخل هذه الوظيفة بعد أن تغيرت إلى ما يلي. يستخدم وظيفة السهم es6 التي تعتبر أصلية لفئات الكتابة المطبوعة. مزيد من المعلومات هنا: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
}, (response: any, status: any) => {

أهلا،
هل يمكن لأي شخص أن يريني كيفية إنشاء حدث مثل النقر فوق موقع البدء كمخرج في مسار مسار الاتجاه.

شكرا

مرحبًا davidpestana ، @ marimuthum17 ،

أواجه مشكلة جديدة مثل ، عندما أرسم مسارًا لأول مرة ، يتم عرضه بشكل صحيح ، إذا كنت أحاول رسم مسار آخر ، فإن المشكلة الأولى لا يتم مسحها وللمسار الجديد ، لا يتم عرض الخط.

هذا هو الكود الخاص بي ،

المكونات ،

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

يتم استدعاء هذه الوظيفة بعد النقر فوق الزر من قبل المستخدم. و html للمكون ،
<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>

كود التوجيه هو كما يلي ،

""
استيراد {Directive، Input، OnInit} من "@ angular / core" ؛
استيراد {GoogleMapsAPIWrapper} من "@ agm / core" ؛

أعلن السماح لجوجل: أي ؛
@ التوجيه ({
// tslint: تعطيل السطر التالي: محدد التوجيه
المحدد: "appCycleDirection"
})
فئة التصدير CycleDirectionDirective تنفذ OnInit {

Input () org ؛
@ الإدخال () dst ؛
Input () originPlaceId: أي ؛
Input () destinationPlaceId: أي ؛
@ الإدخال () نقاط الطريق: أي ؛
@ إدخال () توجيهات العرض: أي ؛
@ الإدخال () المقدر الوقت: أي ؛
@ الإدخال () المقدرة المسافة: أي ؛
المُنشئ (gmapsApi الخاص: GoogleMapsAPIWrapper) {}

ngOnInit () {
console.log ("في التوجيه") ؛
console.log (this.org) ؛
this.gmapsApi.getNativeMap (). ثم (الخريطة => {
الاتجاهات const = new google.maps.DirectionsService ؛
اتجاهات constDisplay = google.maps.DirectionsRenderer جديدة ؛
توجيهات عرض الخريطة (خريطة) ؛
الاتجاهات سيرفيس.روتي ({
الأصل: {lat: this.org.latitude، lng: this.org.longitude} ،
الوجهة: {lat: this.dst.latitude، lng: this.dst.longitude}،
نقاط الطريق: [] ،
تحسينWaypoints: صحيح ،
travelMode: "ترانزيت"
} ، الوظيفة (الاستجابة ، الحالة) {
إذا (الحالة === 'موافق') {
الاتجاهات (الاستجابة) ؛
console.log (استجابة) ؛
} آخر {
window.alert ("فشل طلب الاتجاهات بسبب" + الحالة) ؛
}
}) ؛

});

}

}

""

ما الخطأ في الكود الخاص بي ، أريد إخفاء المسار الأول عند عرض مسار جديد.

مرحبًا ، هل يمكننا وضع حدث نقرة على الطريق؟
شكرا

لقد استخدمت نفس التوجيه في مشروعي وهو يعمل بشكل جيد ، فقط سؤال سريع ، هل من الممكن عرض حركة المرور (أقسام حمراء أو صفراء أو زرقاء على الخط) على الطريق كما هو الحال في خرائط القيادة Waze أو Uber أو lyft؟
مساعدتكم هو محل تقدير كبير

لقد قام هذا الرجل بعمل ممتاز مع هذا التوجيه ، لقد جربته وهو يعمل بشكل جيد للغاية ، يرجى النظر في إمكانية تضمينه في AGM.

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

تم وضع علامة على هذه المشكلة تلقائيًا على أنها قديمة نظرًا لعدم وجود نشاط حديث لها. سيتم إغلاقه إذا لم يحدث أي نشاط آخر. شكرا لمساهماتكم.