1

我正在尝试使用带有 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 吗？如何解决这个问题？

4

1 回答 1

1

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

我找到了一条评论，解释了如何获取地图的实例。基于此：

<agm-map (mapReady)="onMapReady($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);
}
于 2020-10-26T15:09:16.203 回答