使用 ionic 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

如果您不想使用任何外部库，那么您可以查看下面的示例。当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');
        });
});

Answer 2

您可以为链接元素添加唯一 ID。我使用的是 lat 和 lng，因为每个标记的位置都是唯一的。

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。首先，您需要通过将回调传递给脚本 url 来确保在调用任何它之前已加载谷歌地图库。请参阅https://developers.google.com/maps/documentation/javascript/adding-a-google-map 以供参考。最好使用像 https://github.com/SebastianM/angular2-google-maps 这样的任何库来处理 ionic 框架中的地图。