新的google.maps.Mapdocument.getElementById'agmmap'，{}导致agm地图消失

如何解决新的google.maps.Mapdocument.getElementById'agmmap'，{}导致agm地图消失

我正在尝试将Google地方信息库与agm地图一起使用。

html

<agm-map #map id="map" [mapTypeId]="'terrain'" [latitude]="lat" [longitude]="lng" [scrollwheel]="false" style="height: 300px">
  <agm-marker name="latlong" [latitude]="lat" [longitude]="lng" (dragEnd)="markerDragEnd(latitude,longitude,$event)" [markerDraggable]="true">
  </agm-marker>
</agm-map>

ts

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

searchNearbyLocations() {
  var pyrmont = new google.maps.LatLng(this.maps.latitude,this.maps.longitude);
  var request = {
    location: pyrmont,radius: this.radius,type: this.orgtype
  };

  var map = new google.maps.Map(document.getElementById('map'),{
    center: pyrmont,zoom: 15
  });
  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request,this.callback);
}

callback(results,status) {
  console.log(JSON.stringify(results));
}

这段代码使我的agm地图从视图中消失

var map = new google.maps.Map(document.getElementById('map'),{
  center: pyrmont,zoom: 15
});

这是怎么回事？新创建的地图取代了我的agm吗？该如何解决？

解决方法

可能是因为您定位了相同的DOM元素（Google设置了其html）。现在，我对Angular并不熟悉，但是可能您不需要启动新地图，因为您已经有一个（来自AGM）。

我发现a comment解释了如何获取地图实例。基于此：

<agm-map (mapReady)="mapReady($event)"></agm-map>

public onMapReady(e) {
  this.map = e;
}

因此，在 searchNearbyLocations 中，您可以像这样使用this.map来代替创建新地图：

searchNearbyLocations(){
  var pyrmont = new google.maps.LatLng(this.maps.latitude,this.maps.longitude);
  var request = {
    location: pyrmont,radius:this.radius,type: this.orgtype
    
  };

  var service = new google.maps.places.PlacesService(this.map);
  service.nearbySearch(request,this.callback);
}