地图：预期元素类型的 mapDiv 但未定义传递 - 谷歌地图

Posted 2023-02-22

【中文标题】地图：预期元素类型的 mapDiv 但未定义传递 - 谷歌地图

【英文标题】：Map: Expected mapDiv of type Element but was passed undefined - google maps

【发布时间】：2020-08-30 05:24:42

【问题描述】：

我在 div 内有一个地图，其引用为 #mapa 当我想在地图中追踪路线时，地图会刷新。我不想刷新地图我有以下代码：

<div style="height: 500px; width: auto;" #mapa>
  <google-map   [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>

如果我删除带有引用 #mapa 的 div 并将其放入 <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);
    
  );
  

【问题讨论】：

您能否提供一个代码沙盒或堆栈闪电战，以便我们可以从我们这边重现此问题？

您的问题缺少重要信息，因此很难理解问题所在。但是，这里有一个很好的选择：使用directions module of @bespunky/angular-google-maps。它允许您直接使用标记来指示方向。没有额外的代码。

【参考方案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);
      
     );
  

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