如何从当前位置在角度谷歌地图中显示方向

Question

我在我的 angular Web App 中使用了 angular google maps。 我想显示从用户当前位置到包含子位置的标记的路线。 在我的网络应用程序中，标记有多个使用 lat 和 lng 标识的子位置。 因此，当用户点击这些子位置时，必须从用户当前位置显示方向。

我已经安装了 agm-direction 组件并包含在app-module.ts 中。

目前，我的 HTML 文件有，

<agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="zoom">
    <agm-marker *ngFor="let marker of coordinates; let i = index" 
        [iconUrl]="icon" 
        [latitude]="marker.latitude" 
        [longitude]="marker.longitude"
        [markerClickable]="true"
        (markerClick)="markerClicked(marker.latitude,marker.longitude)">
        <agm-snazzy-info-window [closeWhenOthersOpen]="true" [maxHeight]="300" [maxWidth]="1400">
          <ng-template>
            <mat-card>{{ pLocationId }}  {{ pLocationName }}</mat-card><br/>
              <mat-grid-list cols="12" rowHeight="100px" (ngModel)="pCycle">
                <mat-grid-tile [colspan]="4" [rowspan]=2 *ngFor="let cycle of pCycle; let i = index" [style.background]="orange"
                [style.padding-right]="20">
                    <mat-grid-tile-header [style.height]="30">{{i+1}}</mat-grid-tile-header>
                  <div [style.background]="orange">
                    <i class="material-icons">motorcycle</i>
                    <span [style.color]="white" >{{cycle.qrCode}}</span><br/>
                    <br/>
                    <i class="material-icons">battery_alert</i>
                    <span>{{ cycle.batteryLevel }}</span>

                  </div>
                  <mat-grid-tile-footer [style.background]="yellow">
                    <button mat-mini-fab (click)="showDirection(cycle.latitude, cycle.longitude)">
                      <mat-icon>navigation</mat-icon>
                    </button>
                  </mat-grid-tile-footer>
                </mat-grid-tile>
                </mat-grid-list>
          </ng-template>
        </agm-snazzy-info-window>
    </agm-marker>
    <agm-direction *ngIf="dir" [origin]="dir.origin" [destination]="dir.destination" [visible]="show"></agm-direction>
</agm-map>

在 TS 文件中，

showDirection(dirLat: any, dirLng: any) {
    let srcLat, srcLng;
    if ('geolocation' in navigator) {
        navigator.geolocation.getCurrentPosition((position) = > {
            srcLat = position.coords.latitude;
            srcLng = position.coords.longitude;
        });
    }
    this.dir = {
        origin: {
            latitude: srcLat,
            longitude: srcLng
        },
        destination: {
            latitude: dirLat,
            longitude: dirLng
        }
    };
    this.show = true;
    console.log('Nav button clicked');
}

但预期的行为并没有到来。 该应用程序没有显示方向，甚至没有显示控制台输出，

导航按钮被点击

也不来。 请纠正我的错误。

新编辑

在<agm-marker>添加了<agm-direction>标签，现在控制台输出即将到来但方向没有显示。

这是新编辑的 HTML，

<agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="zoom">
    <agm-marker *ngFor="let marker of coordinates; let i = index" 
        [iconUrl]="icon" 
        [latitude]="marker.latitude" 
        [longitude]="marker.longitude"
        [markerClickable]="true"
        (markerClick)="markerClicked(marker.latitude,marker.longitude)">
        <agm-snazzy-info-window [closeWhenOthersOpen]="true" [maxHeight]="300" [maxWidth]="1400">
          <ng-template>
            <mat-card>{{ pLocationId }}  {{ pLocationName }}</mat-card><br/>
              <mat-grid-list cols="12" rowHeight="100px" (ngModel)="pCycle">
                <mat-grid-tile [colspan]="4" [rowspan]=2 *ngFor="let cycle of pCycle; let i = index" [style.background]="orange"
                [style.padding-right]="20">
                    <mat-grid-tile-header [style.height]="30">{{i+1}}</mat-grid-tile-header>
                  <div [style.background]="orange">
                    <i class="material-icons">motorcycle</i>
                    <span [style.color]="white" >{{cycle.qrCode}}</span><br/>
                    <br/>
                    <i class="material-icons">battery_alert</i>
                    <span>{{ cycle.batteryLevel }}</span>

                  </div>
                  <mat-grid-tile-footer [style.background]="yellow">
                    <button mat-mini-fab (click)="showDirection(cycle.latitude, cycle.longitude)">
                      <mat-icon>navigation</mat-icon>
                    </button>
                  </mat-grid-tile-footer>
                </mat-grid-tile>
                </mat-grid-list>
          </ng-template>

        </agm-snazzy-info-window>
        <agm-direction *ngIf="dir" [origin]="dir.origin" [destination]="dir.destination" [visible]="show"></agm-direction>
    </agm-marker>
</agm-map>

Answer 1

看看@bespunky/angular-google-maps 。

它是一个新的开源库，提供了许多开箱即用的很酷的功能。 特别是关于方向，可能最酷的功能是允许开发人员直接使用他们的覆盖（例如标记、多边形等）作为地点和航点，以及许多其他灵活的类型。 没有更多的体力劳动...

这是文档中的一个示例：

<bs-google-map *bsSafe ...>
    <bs-google-maps-marker  [position]="someCoord" #marker="marker"></bs-google-maps-marker>
    <bs-google-maps-polygon [path]="somePath"      #polygon="polygon"></bs-google-maps-polygon>

    <bs-google-maps-directions [through]="[marker, polygon, 'Jerusalem', [31.9, 34.7], { lat: 31.99, lng: 35 }, 'Tel Aviv']"></bs-google-maps-directions>
</bs-google-map>

完整的方向文档| npm 包| 官方网站和演示

Answer 2

this.dir = { origin: { latitude: srcLat, longitude: srcLng }, destination: { latitude: dirLat, longitude: dirLng } };

你应该使用：

this.dir = {
  origin: { lat: srcLat, lng: srcLng },
  destination: { lat: dirLat, lng: dirLng }
};