如何将Map-Click事件的Map-Marker从Google-Map组件传递到功能

Question

我在试图在其中打开地图输入窗口时面临一些问题 Google-map（）通过此操作，在一个Angular 14项目中 指南（）。

这是我的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'的参数。 “

我试图弄清楚这一点，我确实知道该功能正在获取HTML组件，而不是标记，但我不知道该怎么办...我希望这只是一个新手错误。

只是为了帮助这是我的软件包文件：

package.json

Answer 1

似乎要更改我可以

使用的.TS

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

从HTML中

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

使用的类型现在起作用