Question

我一直在尝试渲染地图，我希望在哪里使用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是所有中心的平均值，position是一系列标记。

Answer 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());
}

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

1 个答案: