地图：预期的 Element 类型的 mapDiv 但未定义 - 谷歌地图

Question

我在 div 中有一个带有参考的地图#mapa 当我想在地图中追踪路线时，地图会刷新。我不想刷新地图我有以下代码：

<div style="height: 500px; width: auto;" #mapa>
  <google-map height="500px" width="100%" [zoom]="zoom" [center]="center" [options]="options" (mapClick)="click($event)">
    <map-marker #markerElem *ngFor="let marker of markers" [position]="marker.position" [label]="marker.label" [title]="marker.title" [options]="marker.options" (mapClick)="openInfo(markerElem, marker.info)" (mapDragend)="moveMap($event)">
    </map-marker>
    <map-info-window>{{ infoContent }}</map-info-window>
  </google-map>
</div>

如果我删除带有引用的 div#mapa并将其放入<google-map>标签中，则会出现标题错误并显示没有路线的地图。

trazarRutaMapa() {
  const directionsService = new google.maps.DirectionsService;

  const directionsDisplay = new google.maps.DirectionsRenderer;
  const map = new google.maps.Map(this.mapa.nativeElement, {
    zoom: 7,
    center: {
      lat: this.markers[0].position.lat,
      lng: this.markers[0].position.lng
    }
  });

  directionsDisplay.setMap(map);
  directionsDisplay.setOptions({
    suppressMarkers: false,
    draggable: true,
    markerOptions: {
      icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
    }
  });

  directionsService.route({
    origin: {
      lat: this.markers[0].position.lat,
      lng: this.markers[0].position.lng
    },
    destination: {
      lat: this.markers[1].position.lat,
      lng: this.markers[1].position.lng
    },
    travelMode: google.maps.TravelMode.DRIVING,

  }, (response, status) => {
    if (status === google.maps.DirectionsStatus.OK) {
      console.log('ESTATUS OKEY');

      directionsDisplay.setDirections(response);
    } else {
      window.alert("Fallo el estatus" + status);
    }
  });
}  

Answer 1

据我所知，您只需使用@angular/google-maps官方模块即可实现您的目标。

你的 HTML 将会变成这样

<google-map [options]="options">
  <map-marker *ngFor="let some of somearray" [icon]="...", [label]="...", [position]="..."></map-marker>
  <map-directions-renderer [directions]="..." [options]="..."></map-directions-renderer>
</google-map>

你的 traazarRoutaMapa() 方法将变成这样：

trazarRoutaMapa(): void {
    const directionsService = new google.maps.DirectionsService; // better if injected from constructor
    const request: google.maps.DirectionsRequest = {
      destination: {
        lat: this.markers[0].position.lat,
        lng: this.markers[0].position.lng
      },
      origin: {
        lat: this.markers[1].position.lat,
        lng: this.markers[1].position.lng
      },
      travelMode: google.maps.TravelMode.DRIVING
    };
    return directionsService.route(
    request, 
    (response, status) => {
      if (status === google.maps.DirectionsStatus.OK) {
        console.log('ESTATUS OKEY');
        directionsDisplay.setDirections(response);
      } else {
        window.alert("Fallo el estatus" + status);
      }
     });
  }

免责声明：我没有测试代码，只是在记事本复制/粘贴上创建的:)