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

Posted

技术标签:

【中文标题】地图:预期元素类型的 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 并将其放入 &lt;google-map&gt; 标记中,则会出现标题错误并显示没有路线的地图。

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);
      
     );
  

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

【讨论】:

以上是关于地图:预期元素类型的 mapDiv 但未定义传递 - 谷歌地图的主要内容,如果未能解决你的问题,请参考以下文章

无效属性:预期的数组,但未定义

TypeError:预期的喉咙大小是一个数字,但未定义

MapBox GL Android:来自自定义图块源的离线地图已下载但未使用

异常“已传递主参数'webdriver'但未定义主参数创建注释时出错

FirebaseError:预期类型“Hc”,但它是:自定义 Yc 对象]

Invariant Violation:Invariant Violation:元素类型无效:预期为字符串(对于内置组件)但得到:未定义