使用离子 2 的自定义谷歌地图信息窗口

Question

我是ionic 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');
        });
});

Answer 2

您可以向链接元素添加唯一 id。我正在使用纬度和液化天然气，因为每个标记的位置都是唯一的。

let infoWindow = new google.maps.InfoWindow({
    content :  `<p id = "myid` + lat + lng + `">Click</p>`
});

再后来，

google.maps.event.addListenerOnce(infoWindow, 'domready', () => {
    document.getElementById('myid' + lat + lng).addEventListener('click', () => {
            alert('Clicked');
        });
});

Answer 3

您在控制台中看到任何错误吗？也许您正在尝试在初始化之前访问google.maps。首先，您需要确保谷歌地图库已加载，然后再通过将回调传递给脚本网址来调用它。请参阅 https://developers.google.com/maps/documentation/javascript/adding-a-google-map 以供参考。最好使用任何像 https://github.com/SebastianM/angular2-google-maps 这样的库来处理离子框架中的地图。