自定义谷歌地图infowindow使用离子2 [英] Custom google maps infowindow using ionic 2

问题描述

我是离子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 
}）; 
 
让infoWindow = new google.maps.InfoWindow（{
 content：`<>自定义模板，带有一些基本的细节< />`
}）; 
 
 marker.addListener（'click'，（）=> {
 infoWindow.open（this.map，marker）; 
 
}）; 
 
 this.markers.push（marker）; 
 
  

解决方案

如果你不想要使用任何外部库，那么你可以看到下面的例子。当 infowindow 准备就绪时，您需要添加 addEventListener 。因为当 infowindow document.getElementById（'id'）。>找到组件。 let infoWindow = new google.maps.InfoWindow（{
content：`< p id =myid>点击< / p>`
}）;
google.maps.event.addListenerOnce（infoWindow，'domready'，（）=> {
document.getElementById（'myid'）。addEventListener（'click'，（）=> {
alert（'Clicked'）;
}）;
}）;


I am new to ionic 2, I am trying to create a custom info window, so when a user clicks on a marker they can see some basic information like a picture and the name of the location, but they can also click on a link in the infoWindow that opens a modal with details on that location. Here is how i want to add it to my marker.

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

解决方案

If you don't want to use any external library then you can see below example. You need to add addEventListener when infowindow is ready.Because when infowindow is ready you can find the component by 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');
        });
});

这篇关于自定义谷歌地图infowindow使用离子2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！