Angular-google-maps: 길찾기 서비스

저에게도 같은 질문..

angular2-google-maps와 함께 길찾기 서비스를 사용할 수 있습니까?

-> 길찾기 서비스
-> 예

당신의 노고에 진심으로 감사드립니다
-- 크리스

이것이 내가 액세스할 수 있는 항목인지 알고 싶습니다. 저는 지도 중 하나가 두 위치 사이에서 Google의 제안된 방향을 표시해야 하는 다소 지도가 많은 프로젝트를 진행하고 있습니다. 문서를 살펴보았지만 찾지 못한 경우 알려주세요. 어느 쪽이든, 이 프로젝트는 환상적입니다! 작업 해 주셔서 감사합니다

이 지시문은 귀하의 요구 사항을 해결할 수 있습니다

import {GoogleMapsAPIWrapper} from 'angular2-google-maps/core/services/google-maps-api-wrapper';
import { Directive,  Input} from '@angular/core';
declare var google: any;



@Directive({
  selector: 'sebm-google-map-directions'
})
export class DirectionsMapDirective {
  @Input() origin;
  @Input() destination;
  constructor (private gmapsApi: GoogleMapsAPIWrapper) {}
  ngOnInit(){
    this.gmapsApi.getNativeMap().then(map => {
              var directionsService = new google.maps.DirectionsService;
              var directionsDisplay = new google.maps.DirectionsRenderer;
              directionsDisplay.setMap(map);
              directionsService.route({
                      origin: {lat: this.origin.latitude, lng: this.origin.longitude},
                      destination: {lat: this.destination.latitude, lng: this.destination.longitude},
                      waypoints: [],
                      optimizeWaypoints: true,
                      travelMode: 'DRIVING'
                    }, function(response, status) {
                                if (status === 'OK') {
                                  directionsDisplay.setDirections(response);
                                } else {
                                  window.alert('Directions request failed due to ' + status);
                                }
              });

    });
  }
}

Hey david, 지시에 감사하지만 내 코드에 포함시키는 데 어려움을 겪고 있습니다. 구글 지도 돔에 바로 넣어야 하나요? 예를 들어:
<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 , waypoints는 위치의 배열입니다. 지시문에 논리를 추가하거나 입력 매개변수를 사용하여 이 배열을 삽입할 수 있습니다.

예를 들어...

<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>

요소
`@컴포넌트({
선택기: 'google-maps',
스타일: [require('./googleMaps.scss')],
템플릿: require('./googleMaps.html'),
})
내보내기 클래스 GoogleMaps {
위도 홈: 번호 = 48.151839;
lngHome: 번호 = 13.831726;
latComp: 숫자 = 48.329500;
lngComp: 번호 = 14.319765;
titleComp: 문자열 = "dynatrace";
확대/축소: 숫자 = 10;

위도: 숫자 = (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는 경로를 표시하지만 확대/축소=17로 설정했지만 확대되지 않습니다.

Google API 속성은 DirectionsDisplayService를 사용할 때 모든 웨이포인트를 보기 위해 지도가 자동으로 확대/축소됩니다. Zoom 값을 설정하면 무시됩니다.

@davidpestana 야! 나는 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에 문제가 있습니다. 이 스레드에서 보여준 것과 같은 지시문을 사용하고 아주 잘 작동합니다!
내가 가진 유일한 문제는 동일한 지도에 새 경로를 표시해야 할 때입니다. 상위 Component에서 동일한 함수를 다시 호출하고 이전 경로 위에 새 경로를 인쇄합니다. 이것은 내가 가지고있는 코드입니다.
`
내보내기 클래스 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 이거 알아냈어?

안녕하세요 @davidpestana 및 @ahardworker , 지시문과 지정된 HTML david를 사용하려고 했지만 계속 이 오류가 발생합니다. "InvalidValueError: in property origin: not a string; and not a LatLng or LatLngLiteral: in property lat: not a number; 및 알 수 없는 속성 위도".

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는 조금 서두르고 있었습니다 lol

나는 큰 관심을 가지고 이 주제를 따랐습니다. 그리고 이것이 프로젝트(코어)에 통합되기를 기대합니다.

나는 또한 경로 계획과 길 찾기 API가 필요하다는 것을 알고 있습니다.

@davidpestana @ahardworker 길찾기 지도를 구현했습니다. 하지만 여러 방향을 받고 있습니다. 내 지도 경로를 첨부했습니다. 매번 단일 경로를 얻는 방법을 제안할 수 있습니까?

목적지 값이 변경될 때마다 My DirectionsMapDirective 지시문을 호출합니다.

미리 감사드립니다.

@okanok @marimuthum17 ,
몇 시간 동안 시도한 후에 이 문제에 대한 해결 방법이 있다고 생각합니다... 여기에서 전역 방향 표시를 정의하는 것이 필요하다는 것을 읽을 수 있습니다. 지시문 내부에 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);
                }
            });

Replying to @ssssssssss ㅠㅜ
나도 같은 문제에 직면하고 있습니다. 지시문에서 DirectionsDisplay가 정의되지 않습니다.

@jjjjjjjjjjjjjjjjr
컨트롤러에서 내 지시문을 선언한 방법은 다음과 같습니다.
@ViewChild(DirectionsMapDirective) vc: DirectionsMapDirective;
........아래와 같이 접근합니다.
if(this.vc.directionsDisplay === 정의되지 않음){ this.mapsAPILoader.load().then(() => {
this.vc.directionsDisplay = 새로운 google.maps.DirectionsRenderer;
});

@Bonzysalesman @Giusti @manohar-nyros

내 프로젝트 중 하나에 대해 각도 2에서 Google지도 길 찾기 서비스를 만들었습니다.
여기에 이것에 대한 기사가 하나 있습니다. 전체 소스 코드를 찾을 수 있습니다.
여기에 데모가 첨부되어 있습니다. 원하는 경우 스크립트도 다운로드할 수 있습니다. 그것이 다른 사람에게도 도움이되기를 바랍니다.

@marimuthum17
한 번 살펴봐 주셔서 감사합니다. 또 다른 문제는 ng-for에 자동 완성 필드를 추가하는 방법입니다. 귀하의 예에서 + 버튼이 있고 다른 검색 필드가 나타날 것이라고 말할 수 있습니다. 검색 필드는 #pickupInput / #pickupoutput에 바인딩되어야 하고 @Viewchild가 있어야 하기 때문에 ?

@marimuthum17
도와 주셔서 감사합니다. 그것은 나를 위해 잘 작동합니다. 다시 한번 감사드립니다.

@marimuthum17 , @zuschy
이 지시문은 지금까지 잘 작동하고 있지만 다른 문제가 발생했습니다.

사용자가 생성된 경로에서 마커를 드래그한 다음 해당 경로에 마커를 추가하면 드래그한 마커가 시작점으로 다시 이동합니다( this.vc.updateDirections()) 호출하기 때문에 지시문에서 "directions_changed"를 들었습니다.

Directive에서 @Output 를 만들려고 했지만 @Input 및 @Output 로 origin을 사용할 수 없는 것 같습니다.
나는 또한 directionsDisplay 가 생성된 Component의 ngOnInit 에 리스너를 배치하려고 시도했지만 어쨌든 .addListener 에서 정의되지 않았습니다.

그리고 어떤 마커가 드래그되었는지 잘 모르겠어서 내 아이디어는 Directions_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.';
            }
        });
    }
}

요소:

여기에서는 기본적으로 Mapclicked / Autocomplete에서 this.vc.updateDirections(this.directionsDisplay); 를 호출합니다.

내가 여기에서 다음과 같이 리스너를 시도했을 때:

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 지도 키를 추가했는지 확인하세요. 또는 Google 문서에 따라 매일 제한 요청이 있습니다.

@marimuthum17 당신이 맞습니다 당신의 코드에 아무 문제가 없었습니다 ... 사실 나는 placeId의 일부를 놓쳤습니다 ... 나는 placeId를 올바르게 제공하지 않았습니다. 그것이 문제였습니다 ...

@MartiniHenry1988 google의 길찾기 서비스를 사용하지 않기 때문에 문제가 발생합니다....완전한 예를 보려면 @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-Thug 어떤 버전의 Angular를 사용하고 있습니까? 저는 4*에 있으며 지시문이 다르게 작동합니다.
지시문에서 구문을 선택기: 'sebm-google-map-directions'에서 선택기 ['sebm-google-map-directions']로 변경한 다음 HTML에서 AS 대신 요소에 추가합니다(예

@davidpestana @marimuthum17 위의 작업을 수행했습니다. 이제 사용자의 현재 위치와 선택한 목적지 사이의 방향을 보여줍니다.
하지만 마커 아이콘을 변경해야 합니다! 그렇게하는 방법?
방향 결과에 사용자 지정 마커를 포함하는 방법은 무엇입니까?

@davidpestana
이 솔루션에 import { CustomMapDirective } from '[디렉티브 폴더로의 경로]/google-map.directive'; 하지만 이것을 위해 일부 패키지를 설치해야 합니까 ??

오류 발생 유형 오류: 정의되지 않은 '원본' 속성을 설정할 수 없습니다.

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

미리 감사드립니다.

내 지도에 두 지점이 있습니다. 어떻게 그 사이의 방향을 알 수 있습니까?

component.ts

'@angular/core'에서 { 구성요소 } 가져오기;
'@agm/core'에서 { MouseEvent } 가져오기;

@요소({
선택기: '앱 루트',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
내보내기 클래스 AppComponent {
확대/축소: 숫자 = 8;

위도: 숫자 = 51.673858;
lng: 숫자 = 7.815982;

마커: 마커[] = [
{
위도: 51.673858,
lng: 7.815982,
레이블: 'A',
드래그 가능: 참
},
{
위도: 51.373858,
길이: 7.215982,
레이블: 'B',
드래그 가능: 거짓
}
]

}

인터페이스 마커 {
위도: 숫자;
길이: 숫자;
레이블?: 문자열;
드래그 가능: 부울;
}

@davidpestana 귀하의 코드를 사용하려고 할 때 다음과 같은 오류가 발생합니다.
"'sebm-google-map-directions'의 알려진 속성이 아니므로 'origin'에 바인딩할 수 없습니다."

1. 'sebm-google-map-directions'가 Angular 구성 요소이고 'origin' 입력이 있는 경우 이 모듈의 일부인지 확인하십시오.
2. 'sebm-google-map-directions'가 웹 구성요소인 경우 이 구성요소의 '@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 를 문자열로 사용할 수 있습니까?

추정 _time & distance_에 액세스할 수 없는 이유는 이 코드 블록이 아래에 있기 때문입니다. 이것은 클래스의 this.xyz 변수에 대한 읽기/쓰기 액세스 권한이 없는 익명 콜백 함수입니다.
}, function(response: any, status: any) {

아래로 변경 한 후 해당 기능 내부에 정보를 저장하고 서비스를 사용할 수있었습니다. typescript 클래스에 고유한 es6 화살표 기능을 사용합니다. 추가 정보: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
}, (response: any, status: any) => {

안녕하십니까,
누군가가 방향 경로의 경로에서 출력으로 클릭 시작 위치와 같은 이벤트를 생성하는 방법을 보여줄 수 있습니까?

감사 해요

안녕하세요 @davidpestana , @marimuthum17 , @okanok

처음으로 경로를 그릴 때 올바르게 표시되는 것과 같은 새로운 문제에 직면하고 있습니다. 다른 경로를 그리려고 하면 첫 번째 경로가 지워지지 않고 새 경로의 경우 선이 표시되지 않습니다.

여기 내 코드가 있습니다.

구성 요소.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 { 지시어, 입력, OnInit } from '@angular/core';
'@agm/core'에서 {GoogleMapsAPIWrapper} 가져오기;

let google: any;
@지령({
// tslint:disable-next-line:directive-selector
선택기: 'appCycleDirection'
})
내보내기 클래스 CycleDirectionDirective 구현 OnInit {

@Input() 조직;
@입력() dst;
@Input() originPlaceId: 모두;
@Input() destinationPlaceId: 모두;
@Input() 웨이포인트: 모두;
@Input() 방향표시: 모두;
@Input() 추정시간: 모두;
@Input() 추정 거리: 모두;
생성자(비공개 gmapsApi: GoogleMapsAPIWrapper) { }

ngOnInit() {
console.log(' 지시문에서 ');
console.log(this.org);
this.gmapsApi.getNativeMap().then(지도 => {
const DirectionsService = 새로운 google.maps.DirectionsService;
const DirectionsDisplay = 새로운 google.maps.DirectionsRenderer;
DirectionsDisplay.setMap(지도);
DirectionsService.route({
출발지: {위도: this.org.latitude, lng: this.org.longitude},
목적지: {위도: this.dst.latitude, lng: this.dst.longitude},
웨이포인트: [],
optimizeWaypoints: 참,
여행 모드: 'TRANSIT'
}, 함수(응답, 상태) {
if (상태 === '확인') {
DirectionsDisplay.setDirections(응답);
console.log(응답);
} 또 다른 {
window.alert('' + 상태로 인해 길찾기 요청 실패);
}
});

});

}

}

```

내 코드에 문제가 있는 경우 새 경로가 표시될 때 첫 번째 경로를 사라지게 만들고 싶습니다.

안녕하세요, 도로에 클릭 이벤트를 넣어도 될까요?
감사 해요

나는 내 프로젝트에서 동일한 지시문을 사용했고 잘 작동합니다. 간단한 질문입니다. Waze, Uber 또는 lyft 운전 지도와 같은 도로에서 교통량(빨간색, 노란색 또는 파란색 부분)을 표시할 수 있습니까?
당신의 도움을 높이 평가합니다

이 사람은 이 지시문을 훌륭하게 수행했습니다. 저는 그것을 시도했고 아주 잘 작동합니다. AGM에 포함될 수 있는지 고려하십시오.

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

이 문제는 최근 활동이 없었기 때문에 자동으로 오래된 것으로 표시되었습니다. 더 이상 활동이 없으면 폐쇄됩니다. 귀하의 기여에 감사드립니다.