Angular map-marker-clusterer 组件不工作
Angular map-marker-clusterer component doesn't work
我正在使用如下地图,但这不起作用
<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)
我做错了什么?
环境
Angular: 13.2.3
CDK/Material: 13.2.3
@angukar/google-maps: 13.2.3
@types/google.maps: 3.47.4
@angular/google-maps
确实有错误并且确实导入了错误的 library。
解决方法是在 index.html
文件的头部添加以下脚本。 (或作为 angular.json
文件中的脚本)
<script src="https://unpkg.com/@googlemaps/markerclustererplus/dist/index.min.js"></script>
我正在使用如下地图,但这不起作用
<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)
我做错了什么?
环境
Angular: 13.2.3
CDK/Material: 13.2.3
@angukar/google-maps: 13.2.3
@types/google.maps: 3.47.4
@angular/google-maps
确实有错误并且确实导入了错误的 library。
解决方法是在 index.html
文件的头部添加以下脚本。 (或作为 angular.json
文件中的脚本)
<script src="https://unpkg.com/@googlemaps/markerclustererplus/dist/index.min.js"></script>