单击InfoWindow Typescript Angular2

Question

嗨,我已经搜索了很多个小时,我希望你能帮助我:)

理念

如果您在Google地图上点击InfoWindow,我想显示一个页面.(使用Ionic 2的ModalController)

问题

点击不起作用..

var infoWindow = new google.maps.InfoWindow({
      content: '<h2 (click)="goToProductPage(product)">Click me</h2>'
    });


goToProductPage(product :any){
    let modal = this.modalCtrl.create(ProductPage, product);

    modal.present();
}

遗憾的是,这不起作用,我也尝试使用内容节点onclick="",使用javascript函数..

这是另一个问题,未解决同样的问题.

最好的问候,路易斯

编辑

setProductMarker(product :any, productLocation :any){

    var contentWindow = "<h2 id='clickableItem'>Click me</h2>" + product.productName + "<img src='" + product.imgUrl + "' width='60' height='60' /> <br/>" + product.date

    var clickableItem = document.getElementById('clickableItem');

    clickableItem.addEventListener('click' , () => {
       this.goToProductPage(product);
     });

    var productMarker = new google.maps.Marker({
      position: new google.maps.LatLng(JSON.parse(productLocation).latitude, JSON.parse(productLocation).longitude),
      map: this.map,
      title:"Product"
    })


    var infoWindow = new google.maps.InfoWindow({
      content: contentWindow
    });

    infoWindow.addListener('click', () => {
      alert("yeah");
      console.log("yeah");
    });


  productMarker.addListener('click', event => {
    infoWindow.open(this.map, productMarker);
    this.productNow = product;
    });

  }

Answer 1

解

感谢的帮助丹尼尔·库克与

var clickableItem = document.getElementById('clickableItem');
   clickableItem.addEventListener('click' , () => this.goToProductPage())

- >问题是我的InfoWindow内容尚未准备好进行DOM操作.

所以,domready由于这个问题我添加了一个听众.

google.maps.event.addListener(infoWindow, 'domready', function() {
   // your code
});

这是完整的源代码:

setProductMarker(product :any, productLocation :any){
    var contentWindow = product.productName + "<h2 id='clickableItem'>Click me</h2><img src='" + product.imgUrl + "' width='60' height='60' /> <br/>" + product.date;


    var productMarker = new google.maps.Marker({
      position: new google.maps.LatLng(JSON.parse(productLocation).latitude, JSON.parse(productLocation).longitude),
      map: this.map,
      title:"Product"
    })


    var infoWindow = new google.maps.InfoWindow({
      content: contentWindow
    });

    google.maps.event.addListener(infoWindow, 'domready', () => {
      //now my elements are ready for dom manipulation
      var clickableItem = document.getElementById('clickableItem');
      clickableItem.addEventListener('click', () => {
        this.goToProductPage(product);
      });
    });

  productMarker.addListener('click', event => {
    infoWindow.open(this.map, productMarker);
    this.productNow = product;
    });

  }

丹尼尔再次感谢你的耐心等待!:)