1

当我尝试使用对 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

接下来的两个错误在执行搜索代码后立即出现，我再次对导致它们的原因一无所知. 首先是 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 声明的地图，但似乎无法正确引用它。

4

1 回答 1

1

正确，AgmMap 是一个角度指令，而不是谷歌地图对象。

您想要做的是以下内容：

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需要两个参数，但您只发送一个
于 2019-12-25T19:12:21.850 回答