自定义谷歌地图infowindow使用离子2

Question

我是离子2的新手,我正在尝试创建自定义信息窗口,因此当用户点击标记时,他们可以看到一些基本信息,如图片和位置名称,但他们也可以点击链接infoWindow打开一个模式,其中包含该位置的详细信息.这是我想如何将它添加到我的标记.

addMarker(lat: number, lng: number, place: any): void {
    let latLng = new google.maps.LatLng(lat, lng);

    let marker = new google.maps.Marker({
        map: this.map,
        animation: google.maps.Animation.DROP,
        position: latLng,
        title: place.name
    });

    let infoWindow = new google.maps.InfoWindow({
       content: `<>custom template here with some basic details</>`
    });

    marker.addListener('click', ()=> {
       infoWindow.open(this.map, marker);

    });

    this.markers.push(marker);
} 

Answer 1

如果您不想使用任何外部库,那么您可以看到下面的示例.你需要在准备好时添加.addEventListener因为infowindow什么时候infowindow准备就绪,你可以找到组件document.getElementById('id').

let infoWindow = new google.maps.InfoWindow({
    content :  `<p id = "myid">Click</p>`
});
google.maps.event.addListenerOnce(infoWindow, 'domready', () => {
    document.getElementById('myid').addEventListener('click', () => {
            alert('Clicked');
        });
});