Question

我正在尝试使用 agm-map 中的fitBounds选项将google地图自动调整为可用数据。我做错了；这是我的代码：

<div class="map">
  <agm-map [latitude]= "latitude" 
           [longitude]="longitude"
           [fitBounds]="true">

    <agm-data-layer [geoJson]="listOfPaths"
                    [style]="styleFunc" 
                    [agmFitBounds]="true">
    </agm-data-layer>

  </agm-map>
</div>

我没有做任何与此实现相关的事情（即没有任何打字稿），但是我在docs中看到我应该“实现FitBoundsAccessor抽象类”。谁能提供一个有关如何执行此操作的示例？

这是错误： compiler.js：1021未捕获的错误：模板解析错误：没有FitBoundsAccessor（“ -> [错误->]

Answer 1

fitBounds指令仅适用于agm-marker和自定义组件-即不适用于 agm-data-layer！

要解决此问题，您可以将agm-data-layer包装在这样的自定义组件中：

@Component({
  selector: 'app-agm-data-layer-wrapper',
  template: '<agm-data-layer></agm-data-layer>',
  styleUrls: ['./agm-data-layer-wrapper.component.scss'],
  providers: [
    AgmDataLayerWrapperComponent ,
    {provide: FitBoundsAccessor, useExisting: AgmDataLayerWrapperComponent}
  ],
})
export class AgmDataLayerWrapperComponent implements FitBoundsAccessor {

   ...

   getFitBoundsDetails$(): Observable<FitBoundsDetails> {
     // return the relevant coordinates here
   }
}

（当然，您需要转发相关的输入和输出。）

所需的angular-google-maps fitBoundsAccessor抽象类示例

1 个答案: