如何在 ng2-ui/map 中使用 setbounds答案

【问题标题】：how to use setbounds in ng2-ui/map如何在 ng2-ui/map 中使用 setbounds
【发布时间】：2017-12-28 06:49:39
【问题描述】：

我一直在尝试渲染地图，我希望在其中使用 setbounds。我使用的库是 ng2-ui/map

我无法获得有关如何执行相同操作的任何文档。

到目前为止，我已经编写了以下代码：

<ngui-map [center]=mapCenter zoom=15>
     <marker *ngFor="let pos of positions; let i= index;" [position]="pos" 
      [icon]= "{ url : mapMarkers[i]}"></marker>
</ngui-map>

其中，center 是所有中心的平均值，positions 是一组标记。

【问题讨论】：

标签： angular google-maps

【解决方案1】：

我刚刚偶然发现了您的问题，您现在可能已经解决了，但答案可能对其他人有所帮助。

首先，您需要获取地图的实例和标记；因为那个 ngui-map 会触发 mapReady$ 和 initialized$ 事件。

<ngui-map 
  zoom="15"
  (mapReady$)="onMapReady($event)">
  <marker *ngFor="let pos of positions; let i = index;" 
    [position]="pos"
    (initialized$)="onMarkerInit($event)"
    [icon]= "{ url: mapMarkers[i] }"></marker>
</ngui-map>

然后您必须在您的组件类中实现这些方法，并按照here 的描述使用 Google Maps API。

private bounds: google.maps.LatLngBounds;
private map: google.maps.Map;

onMapReady(map) {
  this.map = map;
  this.bounds = new google.maps.LatLngBounds();
}

onMarkerInit(marker) {
  this.bounds.extend(marker.getPosition());
  this.map.fitBounds(this.bounds);
  this.map.setCenter(this.bounds.getCenter());
}

【讨论】：