Angular-google-maps: 道順サービス

私にとって同じ質問..

案内サービスをangular2-google-mapsで使用できますか？

->ルートサービス
->例

どうもありがとうございました
-クリス

私もこれが私がアクセスできるものであるかどうか知りたいです。 私は、2つの場所の間のGoogleの提案された方向を示すために、マップの1つを必要とするかなりマップの重いプロジェクトに取り組んでいます。 ドキュメントを確認しても見つからなかった場合はお知らせください。 いずれにせよ、このプロジェクトは素晴らしいです！ あなたの仕事をありがとう@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);
                                }
              });

    });
  }
}

ちょっとデビッド、ディレクティブに感謝します、しかし私は私のコードにそれを含めるのに苦労しています。 私はそれをグーグルマップのdomに正しく挿入する必要があります。 例えば：
<sebm-google-map sebm-google-map-directions [origin=x] [destination=y][zoomControl]="false" [latitude]="lat" [longitude]="lng" (mapClick)="mapClicked($event)"> </sebm-google-map>

私はそれを機能させるのに苦労しています、私は実際にAngular2に本当に慣れていません...あなたの助けに感謝します

こんにちは@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-Directiveを含めようとしましたが、次のエラーが発生します。
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'）、
}）
エクスポートクラスGoogleMaps {
latHome：番号= 48.151839;
lngHome：番号= 13.831726;
latComp：数値= 48.329500;
lngComp：数値= 14.319765;
titleComp：string = "dynatrace";
ズーム：数値= 10;

lat：数値=（this.latComp + this.latHome）/ 2;
lng：数値=（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 DirectionsMapDirectiveはルートを表示しますが、zoom = 17を設定したのにズームインしません

そのグーグル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);
  }

DirectionsDisplay.setOptions（{preserveViewport：true}）マップがズーム値を保持するように強制します

@davidpestanaこんにちは、

APIに問題があります。 私はあなたがこのスレッドで示したようにディレクティブを使用します、そしてそれはとてもうまくいきます！
私が抱えている唯一の問題は、同じ地図に新しいルートを表示する必要がある場合です。 親コンポーネントから同じ関数を再度呼び出すと、古いルートの上に新しいルートが出力されます。 これは私が持っているコードです：
`
エクスポートクラス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);
            }
        });

    });
}

}
`
新しいルートを表示する必要がある場合、親コンポーネントがsetMap関数を呼び出し、起点と終点の変数が変更されます。
親コンポーネントからマップをリロードする方法はありますか？

@davidpestana私も
@okanokこれを理解したことはありますか

こんにちは@davidpestanaと@ahardworker 、ディレクティブと指定されたHTML davidを使用しようとしましたが、このエラーが発生し続けます "InvalidValueError：in property origin：not a string; and not LatLng or LatLngLiteral：in property lat：not a number;および不明なプロパティlat」。

Component.ts
原点= {経度：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は少し急いでいました笑

私はこのトピックを非常に興味深くフォローしています。 そして、これがプロジェクト（コア）に統合されることを楽しみにしています。

また、ルート計画とルートAPIが必要です。

@ davidpestana @ ahardworkerルート付きマップを実装しました。 しかし、私は複数の方向性を得ています。 マップルートを添付しました。 毎回単一のルートを取得する方法を提案できますか？

Destionation Valueが変更されるたびに、MyDirectionsMapDirectiveディレクティブを呼び出します。

前もって感謝します。

@okanok @ marimuthum17 、
何時間も試した後、私はこの問題の回避策を得たと思います...ここでは、directionsDisplayグローバルを定義する必要があることを読むことができます。 ディレクティブ内でdirectionsDisplayを定義することにより、毎回、DirectionRendererの新しいインスタンスが作成されるため、前のルートを削除することはできません。

そのため、コンポーネントでDirectionRendererを作成します。
if(this.directionsDisplay === undefined){ this.mapsAPILoader.load().then(() => { this.directionsDisplay = new google.maps.DirectionsRenderer; this.showDirective = true; }); }

次に、 @Input() directionsDisplay;してディレクティブに挿入します。

それは良くないと思いますが..それはうまくいきます..

@zuschyあなたは

私が行った変更は次のとおりです。@ Input（）directionsDisplay：any; //入力のタイプを追加しました。

あなたは私の日を救った。

誰かがプロジェクトに組み込まれる例としてこれを書くほど親切にできますか？

@ zuschy 、@ marimuthum17
このような入力を介してdirectionsDisplayをディレクティブに送信しようとしましたが、directionsDisplayはディレクティブで常に定義されていません

<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
私も同じ問題に直面しています。 DirectionsDisplayがディレクティブで未定義になります。

@ manohar-nyros @Giusti
ここで、コントローラーで自分のディレクティブを宣言した方法
@ViewChild（DirectionsMapDirective）vc：DirectionsMapDirective;
........そして以下のようにアクセスします。
if（this.vc.directionsDisplay === undefined）{this.mapsAPILoader.load（）。then（（）=> {
this.vc.directionsDisplay = new google.maps.DirectionsRenderer;
}）;

@bonzysalesman @Giusti @ manohar-nyros

私のプロジェクトの1つで、Angular2でGoogleマップのルート案内サービスを作成しました。
ここにこれについての1つの記事を書きました、あなたは完全なソースコードを見つけることができます
ここにデモを添付しました。必要に応じて、スクリプトもダウンロードできます。 それが他の誰かにも役立つことを願っています。

@ marimuthum17
ご覧いただきありがとうございます。もう1つの問題は、ngにオートコンプリートフィールドを追加する方法です。たとえば、例では+ボタンがあり、別の検索フィールドが表示されます。 検索フィールドは＃pickupInput / #pickupoutputにバインドする必要があり、 @ Viewchildが必要な

@ marimuthum17
ご支援ありがとうございます。 それは私にとってはうまくいきます。 どうもありがとうございました。

@ marimuthum17 、
ねえ、ディレクティブはこれまでのところうまく機能していますが、別の問題が発生しました：

ユーザーが生成されたルートからマーカーをドラッグしてからルートにマーカーを追加すると、ドラッグされたマーカーは開始点にジャンプして戻ります（ this.vc.updateDirections())を呼び出すため、コンポーネントの原点が更新されないためだと思います）ディレクティブの「directions_changed」をリッスンします。

ディレクティブで@Outputを作成しようとしましたが、originを@Inputおよび@Outputとして使用できないようです。
また、 directionsDisplayが作成されたコンポーネントのngOnInitにリスナーを配置しようとしましたが、どういうわけか.addListener未定義になります

そして、どのマーカーがドラッグされているのかわからないので、私のアイデアは、directions_changedリスナーにスイッチケースを作成し、 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.';
            }
        });
    }
}

成分：

ここでは基本的にMapclicked / Autocompleteでthis.vc.updateDirections(this.directionsDisplay);と呼びます

私がここでこのようにリスナーを試したとき：（addListenerの後に最初のdirectionsDisplay = undefined）

ngOnInit() {


        this.searchControl = new FormControl();

        this.setCurrentPosition();

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

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

        });

    }

質問：

現在、データベースのリストに登録しています。 データベースにマーカーを追加またはデータベースから削除するときに、ngForを使用してマーカーを作成および削除しています。 道順を特定のマーカーに関連付けて、マーカーが地図から削除されたときに道順を削除する方法はありますか？

基本的に、ユーザーはそれらがアプリで利用可能であると言います。 マーカーは、場所への道順とともに地図に表示されます。 彼らが彼らが利用できないと言うとき。 マーカーとそれに関連付けられている方向を地図から削除したい。

また、watchPositionを使用してユーザーの場所を監視します。 明らかに、マーカーの位置と方向を更新する必要があります。

@davidpestanaこのような素晴らしい作業に感謝します...基本的なディレクティブを実装しましたが、「ZERO_RESULTSが原因でディレクティブリクエストが失敗しました」というエラーが表示されます。このエラーを解決できますか？

私もこの問題に直面していますこれをチェックしてください：

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

それはコードに問題はありません。
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解決策を見つけましたか？

申し訳ありませんが、件名はすでに少し古いことはわかっていますが、問題が発生しており、これがエラーです。
'sebm-google-map-directions'の既知のプロパティではないため、 'origin'にバインドできません。
しかし、上記は解決策を与えました、そして私はそれをする方法がはっきりしていません、誰かが私に例を与えることができますか？

私の悪い英語でごめんなさい

@ Fabian-どのバージョンのAngularを使用していますか？ 私は4 *を使用しており、ディレクティブの動作は異なります。
ディレクティブで構文をselector： 'sebm-google-map-directions'からselector ['sebm-google-map-directions']に変更し、HTMLでAS要素ではなく要素に追加します（例

@davidpestana @ marimuthum17私は上記のことをしました。 これで、ユーザーの現在地と選択した目的地の間の方向が表示されます。
しかし、マーカーアイコンを変更する必要があります！ どうやってするか？
方向の結果にカスタムマーカーを含めるにはどうすればよいですか？

@davidpestana
このソリューションにimport {CustomMapDirective} from '[ディレクティブフォルダへのルート] /google-map.directive'を指定します。 しかし、これのために私はいくつかのパッケージをインストールする必要がありますか？

エラーの取得TypeError：未定義のプロパティ 'origin'を設定できません。

@ViewChild（DirectionsMapDirective）vc：DirectionsMapDirective;
公的起源：任意;
公共の目的地：任意;
コンストラクタ（
プライベートモーダルサービス：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（）;

前もって感謝します。

地図に2つのポイントがありますが、それらの間の道順を取得するにはどうすればよいですか？

component.ts

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

@成分（{
セレクター： 'app-root'、
templateUrl： './ app.component.html'、
styleUrls：['./ app.component.css']
}）
エクスポートクラスAppComponent {
ズーム：数値= 8;

lat：数値= 51.673858;
lng：数値= 7.815982;

マーカー：marker [] = [
{{
緯度：51.673858、
lng：7.815982、
ラベル： 'A'、
ドラッグ可能：true
}、
{{
緯度：51.373858、
lng：7.215982、
ラベル： 'B'、
ドラッグ可能：false
}
]

}

インターフェイスマーカー{
lat：数;
lng：番号;
ラベル？：文字列;
ドラッグ可能：ブール値;
}

@davidpestanaあなたのコードを使おうとすると、次のようなエラーが発生します
「 'sebm-google-map-directionsの既知のプロパティではないため、' origin 'にバインドできません」

1. 'sebm-google-map-directions'がAngularコンポーネントであり、 'origin'入力がある場合は、それがこのモジュールの一部であることを確認してください。
2. 'sebm-google-map-directions'がWebコンポーネントの場合、このメッセージを抑制するために、このコンポーネントの '@ NgModule.schemas'に 'CUSTOM_ELEMENTS_SCHEMA'を追加します。
3. すべてのプロパティを許可するには、このコンポーネントの「@ NgModule.schemas」に「NO_ERRORS_SCHEMA」を追加します。 （ "
   

@davidpestanaウェイポイントは、places 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) {

以下に変更した後、その機能内に情報を保存してサービスを利用することができました。 typescriptクラスにネイティブなes6矢印関数を使用します。 詳細はこちら： https ：
}, (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>

指令コードは次のとおりです。

「」
import {Directive、Input、OnInit} from '@ angular / core';
'@ agm / core'から{GoogleMapsAPIWrapper}をインポートします。

let google：any;を宣言します。
@指令（{
// tslint：disable-next-line：directive-selector
セレクター： 'appCycleDirection'
}）
エクスポートクラスCycleDirectionDirectiveはOnInitを実装します{

@Input（）org;
@Input（）dst;
@Input（）originPlaceId：任意;
@Input（）destinationPlaceId：任意;
@Input（）ウェイポイント：任意;
@Input（）directionsDisplay：any;
@Input（）estimatedTime：任意;
@Input（）estimatedDistance：任意;
コンストラクター（プライベートgmapsApi：GoogleMapsAPIWrapper）{}

ngOnInit（）{
console.log（ 'ディレクティブ内'）;
console.log（this.org）;
this.gmapsApi.getNativeMap（）。then（map => {
const DirectionsService = new google.maps.DirectionsService;
const DirectionsDisplay = new google.maps.DirectionsRenderer;
DirectionsDisplay.setMap（map）;
DirectionsService.route（{
起源：{lat：this.org.latitude、lng：this.org.longitude}、
宛先：{lat：this.dst.latitude、lng：this.dst.longitude}、
ウェイポイント：[]、
optimizeWaypoints：true、
travelMode： 'TRANSIT'
}、function（response、status）{
if（status === 'OK'）{
DirectionsDisplay.setDirections（response）;
console.log（response）;
} そうしないと {
window.alert（ '+ステータスが原因で方向要求が失敗しました）;
}
}）;

});

}

}

`` `

コードの何が問題になっていますか。新しいルートが表示されたときに最初のルートを非表示にしたいのですが。

こんにちは、道路にクリックイベントを配置できますか？
ありがとう

私は私のプロジェクトで同じディレクティブを使用しましたが、それはうまく機能します、簡単な質問です、Waze、Uber、またはlyftの運転マップのように道路上の交通（赤、黄、または青のセクション）を表示することは可能ですか？
あなたの助けは大歓迎です

この男はこの指令で素晴らしい仕事をしました、私はそれを試しました、そしてそれは非常にうまくいきます、それがAGMに含まれることができるかどうか考えてください。

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

この問題は、最近のアクティビティがないため、自動的に古いものとしてマークされています。 それ以上のアクティビティが発生しない場合は閉じられます。 貢献していただきありがとうございます。