点击信息窗口打字稿角度2

Question

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

想法

我想显示一个页面，如果你点击谷歌地图上的信息窗口。(使用来自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;
    });
  }

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

Answer 2

如果 InfoWindow 与官方 API 的 InfoWindow 相同，那么它不起作用的原因是因为它不知道如何管理 Angular2 绑定。它只是普通的旧Javascript。

您需要以老式的方式添加事件侦听器。

clickableItem.addEventListener('click' , () => {/*callbackCode */})

编辑

请注意，您必须访问Google地图api公开的一些DOM事件才能执行此操作。

在您的角度2组件中

var content = "<h3 id="click">Clickable Element</b>";

var info = new google.maps.InfoWindow({
    content: content
});
google.maps.event.addListener(info, 'domready', function() {
    document.getElementById("click").addEvent("click", function(e) {
        console.log("hello world");
        e.stop();
    });
});

注意：我从官方 API 的事件部分中提取了大部分内容 - 你真的应该检查一下。