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

Question

[当我尝试使用对agm-map元素的引用来创建PlacesService时，它将失败。如果我动态创建地图（新的google.maps.Map（somediv））并将该地图用作参数，它将成功。我已经尽可能地精简代码以显示问题。首先，我的地图是这样声明的。

 <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

接下来的两个错误在执行搜索代码后立即出现，再次我不知道是什么原因导致我看到它们源自区域之外。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并动态创建第二个地图，然后将其用于PlacesService（fakemap）参数，它可以正常工作。我已经尝试了几种方法来使其工作，并且只有一个html声明的地图，但似乎无法正确引用它。

Answer 1

正确，AgmMap是一个角度指令，而不是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需要两个参数，但您只发送一个