参考 agm-map 元素创建 PlacesService 失败

Question

当我尝试使用对 agm-map 元素的引用创建 PlacesService 时，它失败了。如果我动态创建一个映射（new 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

接下来的两个错误在执行搜索代码后立即出现，我再次对导致它们的原因一无所知我看到它们源于 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 并动态创建第二张地图，然后将其用于 PlacesService(fakemap) 参数，它工作正常。我已经尝试了几种方法来让它工作，但只有一个 html 声明的地图，但似乎无法正确引用它。

Answer 1

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

您要做的是：

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>

我还要指出

没有latitudeChange事件，所以latitude不能双向绑定。
您的 markerDragEnd 需要两个参数，但你只发送了一个

参考 agm-map 元素创建 PlacesService 失败

PlacesService creation failing with reference to an agm-map element

google-maps

angular

agm