点击InfoWindow Typescript Angular2 [英] Click on InfoWindow Typescript Angular2

问题描述

你好，我已经搜索了很多小时，希望你能帮助我:)

主意

如果您点击Google地图上的InfoWindow，我想显示一个页面。 （使用Ionic 2的ModalController）

问题

点击不起作用。

$ b $

  var infoWindow = new google.maps.InfoWindow（{
 content：'< h2（click）=goToProductPage（product） >点击我< / h2>'
}）; 
 
 
 goToProductPage（product：any）{
 let modal = this.modalCtrl.create（ProductPage，product）; 
 
 modal.present（）; 
} 
  

很遗憾，这不起作用，我也尝试了一个内容节点， onclick =，带有javascript函数..

这是另一个问题与同样的问题未解决。

最好的问候，
Luis

编辑

  setProductMarker（product：any，productLocation ：any）{
 
 var contentWindow =< h2 id ='clickableItem'>点击我< / 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（{ b $ b content：contentWindow 
}）; 
 
 infoWindow.addListener（'click'，（）=> {
 alert（yeah）; 
 console.log（yeah）; 
 }）; 
 
 
 productMarker.addListener（'click'，event => {
 infoWindow.open（this.map，productMarker）; 
 this.productNow = product; 
}）; 
 
 
 
 
解决方案
 
解决方案
 
 
 
感谢 Daniel Cooke 的帮助， p> 
 
 
  var clickableItem = document.getElementById（'clickableItem'）; 
 clickableItem.addEventListener（'click'，（）=> this.goToProductPage（））
  
  - >问题是我的InfoWindow内容没有准备好进行DOM操作。  
 
 
 
 
 
所以，我添加了一个 domready 一个href =https://stackoverflow.com/questions/6378007/adding-event-to-element-inside-google-maps-api-infowindow>问题。  
 
 
  google.maps.event.addListener（infoWindow，'domready'，function（）{
 //您的代码
}）; 
  
以下是完整的源代码： 
 
 
  setProductMarker（product：any，productLocation：any）{
 var contentWindow = product.productName +< h2 id ='clickableItem'>点击我< / h2>< ; img src ='+ product.imgUrl +''width = '60'height = '60'/>< br />> + product.date; 
 
 $ b 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'，（）=> {
 //现在我的元素已准备好进行dom操作
 var clickableItem = document .getElementById（'clickableItem'）; 
 clickableItem.addEventListener（'click'，（）=> {
 this.goToProductPage（product）; 
}）; 
}） ; 
 
 productMarker.addListener（'click'，event => {
 infoWindow.open（this.map，productMarker）; 
 this.productNow = product; 
 }）; 
 
 
  
再次感谢Daniel，耐心等待！ :) 
 
Hi I have searched since many hours, I hope you can help me :) 

Idea

I want to display a Page if you click on an InfoWindow on google Maps. (Using a ModalController from Ionic 2)

Problem

Click doesn't work..
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();
}
Sadly this doesn't work, I tried also with a content node, with onclick="", with javascript functions..

Here is another question with the same problem unsolved.

Best regards,
Luis

EDIT

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

  }

解决方案
Solution

Thanks to the help of Daniel Cooke with 
var clickableItem = document.getElementById('clickableItem');
   clickableItem.addEventListener('click' , () => this.goToProductPage())
-> The problem was my InfoWindow content wasn't ready for the DOM manipulation. 



So, I added a domready listener thanks to this question. 
google.maps.event.addListener(infoWindow, 'domready', function() {
   // your code
});
Here is the complete source 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;
    });

  }
Thank you again Daniel for your patience ! :) 

                        
这篇关于点击InfoWindow Typescript Angular2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！