如何将mapclick事件中的地图标记传递给google-map组件中的函数

Question

我在尝试打开地图信息窗口时遇到了一些问题在Angular 14项目中创建一个google-map (https://www.npmjs.com/package/@angular/google-maps)组件指导方针(https://timdeschryver.dev/blog/google-maps-as-an-angular-component设置)。

这是我的html:

<google-map #GoogleMap height="500px" width="100%" [zoom]="zoom" [center]="center" [options]="options">
<map-marker-clusterer [imagePath]="'./assets/images/mappa/m'">
<map-marker #markerElem *ngFor="let s of strutture; let i = index;" 
(mapClick)="openInfo(markerElem, s.Nome)"
[position]="{lat: toNumber(s.Latitudine), lng: toNumber(s.Longitudine)}"
[label]="getLabel(s.Prezzo.toString())" [icon]="getIcon()">
</map-marker>
<map-info-window>{{ infoContent }}</map-info-window>
</map-marker-clusterer>

这是我的ts，我从那里得到我的数据和函数:

export class MappaRisultatiComponent implements OnInit {
@Input() strutture: Struttura[];
toNumber = toNumber;
center!: google.maps.LatLngLiteral;
icon: google.maps.Icon;
zoom: 8;
options: google.maps.MapOptions = {
...
}
@ViewChild(GoogleMap, { static: false }) map: GoogleMap
@ViewChild(MapInfoWindow, { static: false }) info: MapInfoWindow
infoContent = ''
openInfo(marker: MapMarker, content) {
this.infoContent = content
this.info.open(marker)
}
ngOnInit() {
this.center = {
lat: toNumber(this.strutture[0].Latitudine),
lng: toNumber(this.strutture[0].Longitudine),
}
this.icon = {
url: './assets/images/mappa/priceLabel.png'
}
}
public getLabel(prezzo: string): google.maps.MarkerLabel {
let ret: google.maps.MarkerLabel = {
fontWeight: 'bold',
text: prezzo + '€'
}
return ret;
}
public getIcon(): google.maps.Icon {
let ret: google.maps.Icon = {
url: './assets/images/mappa/priceLabel.png'
}
return ret;
}

关键是我不能编译，因为它给了我这个错误:"错误TS2345:类型为'HTMLElement'的参数不能分配给类型为'MapMarker'的参数。">from (mapClick)="openInfo(markerElem, s.Nome)">

我想弄清楚，我明白，函数是得到HTML组件而不是标记，但我不知道我还应该做什么…我刚用了一个星期的Angular，我希望这只是一个新手的错误。

只是帮助这是我的包文件:

package.json

Answer 1

似乎我可以使用

来改变类型from .ts

import { GoogleMap, MapInfoWindow, MapMarker } from '@angular/google-maps';

html 中的

<map-marker #markerElem="mapMarker" *ngF...

现在可以工作了