Angular-google-maps: Служба маршрутов

Тот же вопрос ко мне ..

Можем ли мы использовать службу маршрутов с angular2-google-maps?

-> служба маршрутов
-> пример

Большое спасибо за вашу работу
- Крис

Я тоже хотел бы знать, могу ли я получить к этому доступ. Я работаю над довольно сложным проектом, для которого требуется, чтобы одна из карт показывала предлагаемые 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);
                                }
              });

    });
  }
}

Привет, Дэвид, спасибо за директиву, но мне трудно включить ее в свой код. Стоит ли вставлять прямо в дом гугл карты. Например:
<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
Я попытался включить директиву Directions, но получаю эту ошибку:
Can't bind to 'origin' since it isn't a known property of 'sebm-google-map-directions'.

(Не знаю, почему форматирование такое плохое, но надеюсь, вам все равно удастся его прочитать)

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>

Составная часть
`@Component ({
селектор: 'google-maps',
стили: [require ('./ googleMaps.scss')],
шаблон: require ('./ googleMaps.html'),
})
export class GoogleMaps {
latHome: number = 48.151839;
lngHome: number = 13,831726;
latComp: number = 48,329500;
lngComp: number = 14,319765;
titleComp: строка = "dynatrace";
масштабирование: число = 10;

шир: число = (this.latComp + this.latHome) / 2;
lng: number = (this.lngComp + this.lngHome) / 2;

origin = {долгота: 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 DirectionsMapDirective отображает маршрут, но не увеличивает масштаб, хотя я установил масштаб = 17

это свойство google api, при использовании DirectionsDisplayService карта автоматически масштабируется для просмотра всех путевых точек. если вы установите значение масштабирования, оно будет проигнорировано.

@davidpestana ya! Я попробовал чистую функцию 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 ({preserveViewport: true}) заставляет карту сохранять значение масштабирования

@davidpestana Привет,

У меня проблема с API. Я использую директиву, как вы показали в этой теме, и она работает очень хорошо!
Единственная проблема, с которой я сталкиваюсь, - это когда мне нужно показать новый маршрут на той же карте. Я снова вызываю ту же функцию из родительского компонента, и она печатает новый маршрут поверх старого. Это код, который у меня есть:
`
экспортный класс DirectionsMapDirective {
@Input () определение: строка;
@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: in property origin: not a string; and not a LatLng or LatLngLiteral: in property lat: not a number; и неизвестное свойство лат ».

Component.ts
origin = {долгота: 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 был немного в спешке, lol

С большим интересом слежу за этой темой. И я с нетерпением жду, когда это будет интегрировано в проект (ядро).

Я также заинтересован, что мне нужно иметь api для планирования маршрута и направлений.

@davidpestana @ahardworker Реализовали карту с

Каждый раз при изменении значения Destionation я буду вызывать директиву My DirectionsMapDirective.

Заранее спасибо.

@okanok @ marimuthum17 ,
После нескольких часов попыток я думаю, что нашел обходной путь для этой проблемы ... Здесь вы можете прочитать, что необходимо определить directionDisplay global. Определяя directionDisplay внутри директивы, каждый раз будет создавать новый экземпляр DirectionRenderer, и поэтому он не может удалить предыдущий маршрут.

Поэтому я создаю DirectionRenderer в своем компоненте.
if(this.directionsDisplay === undefined){ this.mapsAPILoader.load().then(() => { this.directionsDisplay = new google.maps.DirectionsRenderer; this.showDirective = true; }); }

А затем введите его с помощью @Input() directionsDisplay; в свою директиву.

Я думаю, это не нормально .. но работает ..

@zuschy Вы выполнили

Я сделал следующее изменение: @Input () directionDisplay: any; // Добавили тип для входа.

Ты спас мне день.

Может ли кто-нибудь быть настолько любезным, чтобы написать это в качестве примера для включения в проект?

@zuschy , @ marimuthum17
Я попытался отправить directionDisplay в директиву через ввод, подобный этому, но directionDisplay всегда не определен в директиве

<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 @ marimuthum17 @Giusti
Я тоже столкнулся с той же проблемой. directionDisplay становится неопределенным в директиве.

@ manohar-nyros @Giusti
Вот как я объявил свою директиву в контроллере
@ViewChild (DirectionsMapDirective) vc: DirectionsMapDirective;
........ и доступ как beow.
if (this.vc.directionsDisplay === undefined) {this.mapsAPILoader.load (). then (() => {
this.vc.directionsDisplay = новый google.maps.DirectionsRenderer;
});

@bonzysalesman @Giusti @ manohar-nyros

Я создал службу маршрутов карты Google в angular 2 для одного из моих проектов.
Здесь написана одна статья об этом, вы можете найти полный волшебный код
Здесь прилагается демоверсия. Если хотите, вы также можете скачать скрипт. Надеюсь, это поможет и кому-то другому.

@ marimuthum17
Спасибо большое, взгляните на это, другая проблема в том, как добавить поля автозаполнения в ng-for, скажем, в вашем примере у вас будет кнопка + и появится другое поле поиска. поскольку поля поиска должны быть привязаны к #pickupInput / #pickupoutput и иметь @Viewchild ?

@ marimuthum17
Спасибо за поддержку. Мне это подходит. Еще раз большое спасибо.

@ marimuthum17 , @zuschy
Привет, директива пока работает отлично, но я столкнулся с другой проблемой:

Когда пользователь перетаскивает маркер из сгенерированного маршрута, а затем добавляет маркер к маршруту, перетаскиваемый маркер возвращается к своей начальной точке (потому что я вызываю this.vc.updateDirections()) я думаю, это потому, что исходная точка в компоненте не обновляется, когда Я слушаю "direction_changed" в директиве.

Я попытался создать @Output в директиве, но, похоже, я не могу использовать origin как @Input и @Output
Я также попытался разместить слушателя в ngOnInit в компоненте, где создается directionsDisplay но каким-то образом он становится неопределенным в .addListener

И я не уверен, какой маркер перетаскивается, поэтому моя идея заключалась в том, чтобы создать случай переключения в слушателе direction_changed и проверить, совпадает ли requestOrigin с источником / пунктом назначения или с одной из путевых точек.

Вот мой код

Директива

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

Когда я попробовал здесь Listener вот так: (первый, если после 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);
            });

        });

    }

Вопрос:

В настоящее время подписывается на список в базе данных. Я использую ngFor для создания и удаления маркеров, когда они добавляются или удаляются из базы данных. Есть ли способ связать маршруты с определенными маркерами, а затем удалить маршруты при удалении маркера с карты?

Обычно пользователь говорит, что они доступны в приложении. Маркер появляется на карте с указанием направления к месту. Когда они говорят, что недоступны. Я хочу, чтобы маркер и связанные с ним маршруты были удалены с карты.

Я также слежу за местоположением пользователя с помощью watchPosition. Очевидно, что нужно обновить положение маркера, а также направления.

@davidpestana спасибо за такую ​​блестящую работу ... Я реализовал базовую директиву, но она выдает ошибку "Запрос направления не удался из-за ZERO_RESULTS", пожалуйста, помогите мне с этой ошибкой?

Я также столкнулся с этой проблемой, проверьте это:

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

В коде нет ничего плохого.
Убедитесь, что вы добавили ключ карты Google при вызове api. или В соответствии с документами Google существует запрос на ограничение на каждый день.

@ marimuthum17, вы правы, в вашем коде не было ничего плохого ... На самом деле я пропустил часть placeId ... Я неправильно указывал placeId, вот в чем проблема ...

@ MartiniHenry1988, у вас @ marimuthum17 .

Что-то изменилось? Я получаю сообщение об ошибке в строке directionsDisplay.setMap(map);

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

@kildareflare @amitdahan, я вижу, вы, ребята, могли столкнуться с той же проблемой, вы когда-нибудь находили исправление?

Я тоже столкнулся с этой проблемой. @chaoranxie вы нашли решение?

Извините, я знаю, что тема уже устарела, но у меня проблемы, и это ошибка:
Невозможно выполнить привязку к «origin», поскольку это не известное свойство «sebm-google-map-routes».
но выше дано решение, и я не понимаю, как это сделать, может ли кто-нибудь привести мне пример?

Извините за мой плохой английский

@ Fabian-Thug, какую версию Angular вы используете? Я на 4 *, и директивы работают иначе.
В директиве измените синтаксис с селектора: 'sebm-google-map-routes' на селектор ['sebm-google-map-routes'], затем в HTML добавьте его в элемент вместо КАК элемент (пример

@davidpestana @ marimuthum17 Я сделал то, что
Но мне нужно поменять значки маркеров! Как это сделать?
Как включить кастомные маркеры в результат направления?

@davidpestana
вы даете этому решению import {CustomMapDirective} из '[ваш маршрут в папку директивы] /google-map.directive'; но для этого мне нужно установить какой-нибудь пакет ??

Получение ERROR TypeError: Невозможно установить для свойства origin значение undefined.

@ViewChild (DirectionsMapDirective) vc: DirectionsMapDirective;
государственное происхождение: любое;
общественное назначение: любое;
конструктор(
частный modalService: 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 ();

Заранее спасибо.

у меня есть две точки на моей карте, как я могу проложить маршрут между ними?

component.ts

импортировать {Компонент} из '@ angular / core';
импортировать {MouseEvent} из '@ agm / core';

@Составная часть({
селектор: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
масштабирование: число = 8;

лат: number = 51,673858;
lng: number = 7.815982;

маркеры: маркер [] = [
{
шир: 51.673858,
lng: 7.815982,
метка: 'A',
перетаскиваемый: правда
},
{
шир: 51.373858,
lng: 7.215982,
метка: 'B',
перетаскиваемый: ложь
}
]

}

маркер интерфейса {
лат: число;
lng: число;
метка ?: строка;
перетаскиваемый: логический;
}

@davidpestana, когда я пытаюсь использовать ваш код, я получаю сообщение об ошибке, например
«Невозможно выполнить привязку к 'origin', поскольку это не известное свойство 'sebm-google-map-routes»

1. Если «sebm-google-map-routes» является компонентом Angular и имеет вход «origin», убедитесь, что он является частью этого модуля.
2. Если «sebm-google-map-routes» является веб-компонентом, добавьте «CUSTOM_ELEMENTS_SCHEMA» в «@ NgModule.schemas» этого компонента, чтобы подавить это сообщение.
3. Чтобы разрешить любое свойство, добавьте «NO_ERRORS_SCHEMA» в «@ NgModule.schemas» этого компонента. ("
   

@davidpestana Возможно, стоит отметить, что ваши путевые точки могут быть определены как ответ от API мест, LatLng или чего-то подобного:

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 , @okanok

Я столкнулся с новой проблемой, например, когда я рисую маршрут в первый раз, он отображается правильно. Если я пытаюсь нарисовать другой маршрут, первый не очищается, а для нового маршрута линия не отображается.

Вот мой код,

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

Эта функция вызывается после нажатия кнопки пользователем. и 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>

Код директивы выглядит следующим образом:

`` ''
импортировать {Директива, Ввод, OnInit} из '@ angular / core';
импортировать {GoogleMapsAPIWrapper} из '@ agm / core';

объявить let google: any;
@Directive ({
// tslint: disable-next-line: директива-селектор
селектор: 'appCycleDirection'
})
класс экспорта CycleDirectionDirective реализует OnInit {

@Input () org;
@Input () dst;
@Input () originPlaceId: любой;
@Input () destinationPlaceId: любой;
@Input () путевые точки: любые;
@Input () directionDisplay: любой;
@Input () EstimatedTime: любой;
@Input () EstimatedDistance: любое;
конструктор (частный gmapsApi: GoogleMapsAPIWrapper) {}

ngOnInit () {
console.log ('Директива In');
console.log (this.org);
this.gmapsApi.getNativeMap (). then (map => {
const directionService = новый google.maps.DirectionsService;
const directionDisplay = новый google.maps.DirectionsRenderer;
directionDisplay.setMap (карта);
directionService.route ({
origin: {lat: this.org.latitude, lng: this.org.longitude},
пункт назначения: {lat: this.dst.latitude, lng: this.dst.longitude},
путевые точки: [],
optimizeWaypoints: true,
travelMode: "ТРАНЗИТ"
}, функция (ответ, статус) {
if (status === 'OK') {
directionDisplay.setDirections (ответ);
console.log (ответ);
} еще {
window.alert ('Не удалось выполнить запрос маршрута из-за' + status);
}
});

});

}

}

`` ''

Что не так с моим кодом, я хочу, чтобы первый маршрут исчезал при отображении нового маршрута.

Привет, можно ли добавить событие щелчка в дорогу?
Спасибо

Я использовал ту же директиву в своем проекте, и она отлично работает. Небольшой вопрос: можно ли отображать трафик (красные, желтые или синие участки на линии) на дороге, как на картах вождения Waze, Uber или Lyft?
Ваша помощь очень ценится

Этот парень отлично справился с этой директивой, я пробовал ее, и она работает очень хорошо, подумайте, можно ли ее включить в AGM.

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

Эта проблема была автоматически помечена как устаревшая, поскольку в последнее время не было активности. Он будет закрыт, если больше не будет активности. Спасибо за ваш вклад.