点击InfoWindow Typescript Angular2

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函数。

这里有另一个类似的问题没有得到解决。

最好的问候， Luis

编辑

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

  }

- luiswill

---

我不确定(click)="goToProductPage(product)"是否可以这样触发。你可以尝试这个方法吗？对我来说有效。infoWindow.addEventListener('click', () => {})。只是告诉你，在我的情况下，我准备了一个从DOM中获取的HTML元素，而不是infoWindow。 - Sagar Kulkarni

Answer 1

解决方案

在Daniel Cooke的帮助下，我们得以：

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

-> 问题是我的信息窗口内容还没有准备好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;
    });

  }

再次感谢你的耐心，Daniel！:)

- luiswill

---

太棒了。这对我很有帮助。 - tala9999

Answer 2

如果InfoWindow与官方API中的InfoWindow相同，则无法正常工作的原因是它不知道如何管理Angular2绑定。它只是普通的旧JavaScript。您需要以传统方式添加事件监听器。

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

编辑

请注意，您将需要访问Google地图API公开的一些DOM事件才能实现此操作。

在您的Angular2组件中：

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的事件部分 - 你应该真正去查看一下。

- Daniel Cooke

---

嘿，这太棒了！我已经知道你的一些代码，但不是全部。所以关于模板，只有一个问题：你在哪里编写模板代码？在变量中然后传递给“content”吗？还是将其放在其他正常模板中？因为我不知道应该把它放在哪里，因为它是一个infoWindow，所以一开始看不到...希望你能理解我 :) - luiswill

是的，我已经尝试过了，但是点击事件没有被捕获，即使你说“<!--请注意，它仍然可以通过DOM访问-->”。我更新了我的代码，也许会更清晰 :) - luiswill

@luiswill 我在回答中犯了几个错误，我会在今天稍后更新 - 抱歉。 - Daniel Cooke

@luiswill 很好，你几乎在我纠正我的解决方案的同时找到了一个解决方案 - 一切顺利。 - Daniel Cooke