angular-google-maps fitBoundsAccessor 需要抽象类示例

Question

我正在尝试使用agm-map中的 fitBounds 选项来自动调整谷歌地图到可用数据。 我做错了什么;这是我的代码：

<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>

我没有做与此实现相关的任何其他事情(即，没有关联的打字稿(，但我在文档中看到我应该"实现 FitBoundsAccessor 抽象类"。任何人都可以提供如何做到这一点的示例吗？

这是错误：编译器.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
}
}

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