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

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

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

3 个答案: