Angular 地图标记集群组件不起作用

Question

我按如下方式使用地图，但这不起作用

<google-map #googleMap width="100%" height="100%" (idle)="initClusterer($event)">
  <map-marker-clusterer *ngIf="googleMap?.googleMap">
    <ng-container *ngFor="let i of items">
      <ng-container *ngIf="i.categories | haveCategory: targetCategory">
        <map-marker #markerElem [position]="i.position"> </map-marker>
      </ng-container>
    </ng-container>
  </map-marker-clusterer>
</google-map>

import { MarkerClusterer } from '@googlemaps/markerclusterer'

//...

@ViewChild('googleMap', { static: true }) googleMap: GoogleMap
markerCluster?: MarkerClusterer

// ...

initClusterer(e) {
    console.log('initClusterer', e)
    if (!this.googleMap?.googleMap || this.markerCluster) return

    console.log(this.googleMap, this.googleMap.googleMap)
    this.markerCluster = new MarkerClusterer({
      map: this.googleMap.googleMap,
      markers: this.markerElem,
    })
}

我确实下载了以下依赖项 npm i @googlemaps/markerclusterer
npm i @types/google.maps --save-dev

而不是markerclustererplus，因为它已被弃用。

但我收到以下错误。

vendor.js:91237 ERROR Error: MarkerClusterer class not found, cannot construct a marker cluster. Please install the MarkerClustererPlus library: https://github.com/googlemaps/js-markerclustererplus
    at MapMarkerClusterer.ngOnInit (vendor.js:125746:15)

我做错了什么？

环境

角度：13.2.3 CDK/材质：13.2.3
@angukar/google-maps：13.2.3
@types/google.maps：3.47.4

Answer 1

他们@angular/google-maps确实有一个错误，并且确实导入了不正确的库。

解决方法是将以下脚本添加到文件的头部index.html。（或作为angular.json文件中的脚本）

<script src="https://unpkg.com/@googlemaps/markerclustererplus/dist/index.min.js" async defer></script>

还是行不通？

google-map在准备好 google 地图 javascript 之前，您肯定会加载该对象。

为了解决这个问题。

1. npm i @googlemaps/js-api-loader 文档
2. 添加这段代码，我在服务中完成了它并订阅了可观察的内容，但是您只需在加载后显示该组件即可。由你决定

google?: any // Type somehow not working that great
onMapApiDidLoad$: BehaviorSubject<any> = new BehaviorSubject(null)
    
this.mapLoader
  .load()
  .then((google) => {
    this.google = google

    this.onMapApiDidLoad$.next(google)
  })
  .catch(() => {
    this.onMapApiDidLoad$.next(false)
  })