PlacesService创建失败，因为引用了agm-map元素

Question

当我尝试使用对agm- PlacesService元素的引用来创建映射时，它失败了。如果我动态创建一个映射(new google.maps.Map(somediv))并将该映射用于一个参数，它就会成功。我已经尽可能地压缩了我的代码来显示问题。首先，我的map是这样声明的。

 <div style="min-height: 400px;">
  <agm-map [latitude]="lat" [longitude]="lng" [fitBounds]="bounds" [zoom]="zoom">
    <agm-marker *ngIf="repo.state == 2" [(latitude)]="repo.searchLocation.marker.lat"
      [(longitude)]="repo.searchLocation.marker.lng" 
      [markerDraggable]="repo.searchLocation.marker.draggable"
      (dragEnd)='markerDragEnd($event)'></agm-marker>
  </agm-map>
</div>

我通过如下方式获得对地图的引用：

   @ViewChild(AgmMap, { static: true })
   map: AgmMap;

为了精简代码，我将搜索放在了MarkerDragEnd处理程序中。

markerDragEnd(m: any, $event: any) {
    this.repo.searchLocation.marker.lat = m.coords.lat;
    this.repo.searchLocation.marker.lng = m.coords.lng;
    this.findAddressByCoordinates();

    let request = {
        location:  { lat: m.coords.lat, lng: m.coords.lng},
        radius: "25000",
        type: ["rv_park"]
    };

    let service = new google.maps.places.PlacesService(this.map);
    service.nearbySearch(request, (results, status) => {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
            for (var i = 0; i < results.length; i++) {
                var place = results[i];
            }
        }
    });
}

我正在重写一个应用程序，它以前是ASP.NET与剃刀页面，所有的工作都是在服务器上完成的。我曾希望将服务器工作转移到客户端，但这失败得很糟糕，而且我能找到的错误出现在调试器的控制台中。

我不知道这是否是线索，但我在应用程序启动时看到了这个错误，我不确定它是什么时候开始的。我确定我以前见过它，但不知道是什么原因造成的。

sockjs.js:1684 WebSocket connection to 'wss://localhost:5005/sockjs-node/826/5h1gkgu3/websocket' failed: Error during WebSocket handshake: Unexpected response code: 400

接下来的两个错误在执行搜索代码后立即出现，我仍然不知道是什么原因导致它们，我看到它们源于zone.JS，我尝试在区域外部和内部运行代码，但仍然得到相同的错误。首先，this.h.getElementByTagName不是一个函数。

    core.js:4002 ERROR Error: Uncaught (in promise): TypeError: this.h.getElementsByTagName is not a 
function
TypeError: this.h.getElementsByTagName is not a function
    at u$.attributionText_changed (places_impl.js:74)

第二个例外是在服务创建失败后，"NearBySearch“不是"null”的属性。

正如我在开始时提到的，成功的做法是创建一个没有高度的div，然后动态创建第二个map，然后将它用于PlacesService(fakemap)参数，它工作得很好。我已经尝试了几种方法来让它工作，只有一个html声明了map，但是似乎不能得到一个正确的引用。

Answer 1

正确，AgmMap是一个angular指令，而不是google Map对象。

您想要做的是：

map: GoogleMap;

<div style="min-height: 400px;">
  <agm-map [latitude]="lat" [longitude]="lng" [fitBounds]="bounds" [zoom]="zoom">
    <agm-marker *ngIf="repo.state == 2" [(latitude)]="repo.searchLocation.marker.lat"
      [(longitude)]="repo.searchLocation.marker.lng"
      (mapReady)="map = $event"
      [markerDraggable]="repo.searchLocation.marker.draggable"
      (dragEnd)='markerDragEnd($event)'></agm-marker>
  </agm-map>
</div>

我还要指出的是

1. 没有latitudeChange事件，因此latitude不能双向绑定。
2. 您的markerDragEnd需要两个参数，但您只发送了一个