两个标记之间没有绘制路线

Question

我在控制台中获得了所有结果，但是两条标记之间没有绘制路线。我应该为方向导入任何模块吗？我应该将指示置于自动完成之外吗？

app.component.ts

我省略了源

的自动完成功能

//load Places Autocomplete2
         this.mapsAPILoader.load().then(() => {
          let autocomplete = new google.maps.places.Autocomplete(this.searchElementRef1.nativeElement, {
            types: ["address"]
          });
          autocomplete.addListener("place_changed", () => {
            this.ngZone.run(() => {
              //ge

t the place result
                  let place: google.maps.places.PlaceResult = autocomplete.getPlace();
                  //verify result
                  if (place.geometry === undefined || place.geometry === null) {
                    return;
                  }

                  //set latitude, longitude and zoom
                  this.latitude1 = place.geometry.location.lat();
                  this.longitude1 = place.geometry.location.lng();
                  this.zoom = 9;
                });
                var map = new google.maps.Map(this.searchElementRef.nativeElement, {
                  center: {lat:this.latitude,lng:this.longitude},
                  zoom: 7
                });
                var directionsService = new google.maps.DirectionsService();
                var directionsDisplay = new google.maps.DirectionsRenderer({
                  'map': map
                });
                console.log("display : " + directionsDisplay.getMap().getCenter())
                var start = new google.maps.LatLng(this.latitude, this.longitude);
                var end = new google.maps.LatLng(this.latitude1, this.longitude1);
                // Set destination, origin and travel mode.
                var request : google.maps.DirectionsRequest = {
                  origin: start,
                  destination: end,
                  travelMode: google.maps.TravelMode.DRIVING
                };
                console.log("request : " + request.origin +"request : " + request.destination  )

                // Pass the directions request to the directions service.
               // var directionsService = new google.maps.DirectionsService();
                directionsService.route(request, function(response, status) {
                  if (status == google.maps.DirectionsStatus.OK) {
                    // Display the route on the map.
                    directionsDisplay.setMap(map);
                    directionsDisplay.setDirections(response); 
                    console.log("response : " + response.geocoded_waypoints.map(f => f.place_id))   
                  } else { console.log("not OK !" + status)}
                });
              });
            });
          }

          private setCurrentPosition() {
            if ("geolocation" in navigator) {
              navigator.geolocation.getCurrentPosition((position) => {
                this.latitude = position.coords.latitude;
                this.longitude = position.coords.longitude;
                this.zoom = 10;
              });
            }
          }
        }

Answer 1

您可以从以下链接使用agm-direction：

npmjs 要么 github

安装agm＆amp; AGM-方向：

npm install --save @agm/core
npm install --save agm-direction

导入模块：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { AgmCoreModule } from '@agm/core';            // @agm/core
import { AgmDirectionModule } from 'agm-direction';   // agm-direction

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AgmCoreModule.forRoot({ // @agm/core
      apiKey: 'your key',
    }),
    AgmDirectionModule      // agm-direction
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

使用方法：

在你的html中添加agm-map组件内的agm-direction组件

<agm-map [latitude]="lat" [longitude]="lng">
  <agm-direction *ngIf="dir" [origin]="dir.origin" [destination]="dir.destination"></agm-direction>
</agm-map>

您可以在ts文件中

配置路线

  lat: Number = 24.799448;
  lng: Number = 120.979021;
  zoom: Number = 14;

  dir = undefined;

  public getDirection() {
    this.dir = {
      origin: { lat: 24.799448, lng: 120.979021 },
      destination: { lat: 24.799524, lng: 120.975017 }
    }
  }

这是stackblitz中的一个示例： https://stackblitz.com/edit/angular-google-maps-direction