javascript - 使用 ionic 2 自定义谷歌地图信息窗口

Question

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

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

如果你不想使用任何外部库，那么你可以看下面的例子。当infowindow 就绪时，您需要添加addEventListener。因为当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');
        });
});