Angular-google-maps: 路线服务

对我来说同样的问题..

我们可以在 angular2-google-maps 中使用路线服务吗？

->路线服务
->例子

非常感谢你的工作
- 克里斯

我也想知道这是否是我可以访问的内容。 我正在从事一个相当重地图的项目，该项目需要其中一张地图来显示谷歌建议的两个位置之间的方向。 请让我知道我是否已经查看了文档并且没有找到它。 无论哪种方式，这个项目都很棒！ 感谢您的工作@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>

我很难让它工作，我实际上是 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'.

（我不知道，为什么格式那么糟糕，但我希望你无论如何都能阅读它）

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>

成分
`@组件({
选择器：“谷歌地图”，
样式：[require('./googleMaps.scss')],
模板：要求（'./googleMaps.html'），
})
导出类 GoogleMaps {
纬度：数字 = 48.151839；
lngHome：数字 = 13.831726；
latComp: 数字 = 48.329500;
lngComp: 数字 = 14.319765;
titleComp: string = "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 DirectionsMapDirective 显示路线但它没有放大虽然我已经设置了 zoom=17

它是一个 google api 属性，当使用 DirectionsDisplayService 时，地图会自动缩放以查看所有航点。 如果您设置缩放值，它将被忽略。

@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 有问题。 我使用您在此线程中显示的指令，并且效果很好！
我唯一的问题是当我需要在同一张地图上显示一条新路线时。 我再次从父组件调用相同的函数，它会在旧路由上打印新路由。 这是我的代码：
`
导出类 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 david，但我不断收到此错误“InvalidValueError：在属性起源中：不是字符串；而不是LatLng 或LatLngLiteral：在属性纬度中：不是数字；和未知的财产纬度”。

组件.ts
原点 = { 经度：4.333，纬度：-1.2222 }; // 它是一个示例随机位置
目的地 = { 经度：22.311，纬度：-0.123 }; // 它是一个示例随机位置

组件.html

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

错误：InvalidValueError：在属性来源中：不是字符串； 而不是 LatLng 或 LatLngLiteral: 在属性中 lat: 不是数字； 和未知财产 lat

你有什么想法吗？

谢谢

@developernm你把纬度

@bene-starzengruber 有点匆忙，哈哈

我一直怀着极大的兴趣关注这个话题。 我期待将其集成到项目（核心）中。

我也很感兴趣，我需要路线规划和方向 API。

@davidpestana @ahardworker已经实现了带有方向的地图。 但我得到了多个方向。 附上了我的地图路线。 您能否建议如何每次获得单一路线？

每次目标值更改时，我都会调用 My DirectionsMapDirective 指令。

提前致谢。

@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: any; // 为输入添加了类型。

你救了我的一天。

有没有好心人能把这个写成例子，融入到项目中？

@zuschy，@ marimuthum17
我试图通过这样的输入将方向显示发送到指令，但方向显示在指令中始终未定义

<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
我也面临同样的问题。 指令中的方向显示未定义。

@manohar-nyros @Giusti
在这里我如何在控制器中声明我的指令
@ViewChild(DirectionsMapDirective) vc：DirectionsMapDirective；
......并像下面一样访问。
if(this.vc.directionsDisplay === undefined){ this.mapsAPILoader.load().then(() => {
this.vc.directionsDisplay = 新的 google.maps.DirectionsRenderer;
});

@bonzysalesman @Giusti @manohar-nyros

我为我的一个项目创建了 angular 2 的谷歌地图方向服务。
这里写了一篇关于这个的文章，你可以找到完整的源代码
这里附上了演示，如果你想要你也可以下载脚本。 希望它也能帮助别人。

@ marimuthum17
非常感谢您看一看，另一个问题是，我将如何在 ng-for 中添加自动完成字段，让我们说在您的示例中，您将有一个 + 按钮，并且会出现另一个搜索字段。 因为搜索字段必须绑定到 #pickupInput / #pickupoutput 并且必须有一个@Viewchild ？

@ marimuthum17
感谢您的支持。 这对我来说很好用。 再次非常感谢。

@marimuthum17 ，
嘿，到目前为止，该指令运行良好，但我遇到了另一个问题：

当用户从生成的 Route 中拖动 am Marker 然后向 Route 添加一个 Marker 时，拖动的标记会跳回其起点（因为我调用了this.vc.updateDirections())我认为这是因为组件中的原点在我听了指令中的“directions_changed”。

我试图在指令中创建一个@Output ，但似乎我不能使用 origin 作为@Input和@Output
我还尝试将侦听器放在创建ngOnInit的组件中的directionsDisplay中，但不知何故它在.addListener未定义

而且我不确定拖动了什么标记，所以我的想法是在 Directions_changed Listener 中创建一个 switch case 并检查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);

当我像这样在这里尝试监听器时：（第一个如果在 addListener 之后的方向显示 = 未定义）

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 时添加了您的谷歌地图密钥。 或根据谷歌文档，每天都有一定的限制请求。

@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-directions' 的已知属性。
但上面给出了一个解决方案，我不清楚该怎么做，有人可以举个例子吗？

对不起，我的英语不好

@Fabian-Thug 您使用的是什么版本的 Angular？ 我在 4* 上，指令的工作方式不同。
在指令中，将语法从选择器：'sebm-google-map-directions' 更改为选择器 ['sebm-google-map-directions'] 然后在 HTML 中将其添加到元素而不是作为元素（示例

@davidpestana @marimuthum17我已经完成了上面的一个。 现在它显示了用户当前位置和选定目的地之间的方向。
但我需要更改标记图标！ 怎么做？
如何在方向结果中包含自定义标记？

@davidpestana
你给这个解决方案 import { CustomMapDirective } from '[your route to directive folder]/google-map.directive'; 但是为此我需要安装一些软件包吗？？

获取错误类型错误：无法设置未定义的属性“原点”。

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

提前致谢。

我的地图上有两个点，我怎样才能在它们之间找到方向？

组件.ts

从“@angular/core”导入{组件}；
从“@agm/core”导入{鼠标事件}；

@成分（{
选择器：'app-root'，
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
导出类 AppComponent {
缩放：数字 = 8；

纬度：数字 = 51.673858；
lng：数字 = 7.815982；

标记：标记[] = [
{
纬度：51.673858，
液化天然气：7.815982，
标签：'A',
可拖动：真
},
{
纬度：51.373858，
液化天然气：7.215982，
标签：'B',
可拖动：假
}
]

}

界面标记{
纬度：数字；
lng：数字；
标签？：字符串；
可拖动：布尔值；
}

@davidpestana当我尝试使用你的代码时，我收到了类似的错误
“无法绑定到‘origin’，因为它不是‘sebm-google-map-directions’的已知属性”

1. 如果 'sebm-google-map-directions' 是一个 Angular 组件并且它有 'origin' 输入，那么验证它是否是这个模块的一部分。
2. 如果“sebm-google-map-directions”是一个 Web 组件，则将“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 :
}, (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>

指令代码如下，

````
从'@angular/core'导入{指令，输入，OnInit}；
从“@agm/core”导入 {GoogleMapsAPIWrapper}；

声明让谷歌：任何；
@指示（{
// tslint:disable-next-line:directive-selector
选择器：'appCycleDirection'
})
导出类 CycleDirectionDirective 实现 OnInit {

@Input() 组织；
@Input() dst;
@Input() originPlaceId: 任何;
@Input() destinationPlaceId: 任意;
@Input() 航路点：任何；
@Input() 方向显示：任意；
@Input() 估计时间：任意；
@Input() 估计距离：任意；
构造函数（私有 gmapsApi：GoogleMapsAPIWrapper）{}

ngOnInit() {
console.log(' 在指令中 ');
控制台日志（this.org）；
this.gmapsApi.getNativeMap().then(map => {
const DirectionsService = 新的 google.maps.DirectionsService;
const 方向显示 = 新的 google.maps.DirectionsRenderer;
方向显示.setMap(地图);
路线Service.route({
原点：{lat：this.org.latitude，lng：this.org.longitude}，
目的地：{lat：this.dst.latitude，lng：this.dst.longitude}，
航点：[],
优化航路点：真，
旅行模式：'运输'
}，功能（响应，状态）{
如果（状态 === 'OK'）{
DirectionsDisplay.setDirections（响应）；
控制台日志（响应）；
} 别的 {
window.alert('由于'+状态，路线请求失败);
}
});

});

}

}

``

我的代码有什么问题，我想在显示新路线时使第一条路线消失。

嗨，我们可以在路上放一个点击事件吗？
谢谢

我在我的项目中使用了相同的指令并且它工作正常，只是一个简单的问题，是否可以像 Waze、Uber 或 lyft 驾驶地图那样在道路上显示交通（红色、黄色或蓝色部分）？
非常感谢您的帮助

这家伙在这个指令上做得很好，我试过了，效果很好，请考虑是否可以将其包含在 AGM 中。

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

此问题已自动标记为过时，因为它最近没有活动。 如果没有进一步的活动发生，它将被关闭。 感谢你的贡献。