如何在当前位置显示角度Google地图中的路线

Question

我在我的角度Web应用程序中使用有角度的谷歌地图。我想显示从用户当前位置到包含子位置的标记的路线。在我的网络应用程序中，标记具有使用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');
  }

但预期的行为不会到来。该应用程序未显示路线，甚至是控制台输出，

  

单击导航按钮

也没有来。 请纠正我错在哪里。

新编辑，

在里面添加了标签，现在控制台输出即将到来，但方向没有显示。

以下是新编辑的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>

Full directions docs | npm package | Official site & demos

Answer 2

  

this.dir = {         原点：{纬度：srcLat，经度：srcLng}，         目的地：{纬度：dirLat，经度：dirLng}       };

您应该使用：

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