单击 InfoWindow Typescript Angular2

Posted 2023-03-13

【中文标题】单击 InfoWindow Typescript Angular2

【英文标题】：Click on InfoWindow Typescript Angular2

【发布时间】：2017-09-05 09:45:46

【问题描述】：

嗨，我已经搜索了好几个小时，希望你能帮助我:)

想法

如果您单击谷歌地图上的信息窗口，我想显示一个页面。 （使用 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 函数..

这是另一个question with the same problem 未解决的问题。

最好的问候， 路易斯

编辑

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

  

【问题讨论】：

我不确定(click)="goToProductPage(product)"是否可以这样触发。你可以试试这个吗？为我工作。 infoWindow.addEventListener('click', () => )。只是告诉你，在我的例子中，我有一个从 DOM 准备的 html 元素，而不是 infoWindow。

【参考方案1】：

如果 InfoWindow 是相同的InfoWindow from the official API，那么它不工作的原因是因为它不知道如何管理 Angular2 绑定。它只是普通的旧 Javascript。

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

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

编辑

请注意，您必须访问 Google maps 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();

    );
);

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

【讨论】：

嘿，这太棒了！我已经知道您的一些代码，但我并不完全了解所有代码。所以只有一个关于模板的问题：你在哪里写你的模板代码？在 var 中，然后传递给 content ？还是你把它和另一个放在普通模板中？因为我不知道把它放在哪里，因为它是一个 infoWindow，所以一开始不可见。希望你能理解我:)

是的，我已经尝试过了，但点击没有被捕获，即使你说“” 我更新了我的代码，也许会更清楚:)

@luiswill 我在回答中犯了一些错误，我会在今天晚些时候更新它 - 道歉

@luiswill 非常好，您几乎在我纠正我的同时找到了解决方案 - 一切顺利

【参考方案2】：

解决方案

感谢Daniel Cooke与

的帮助

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

-> 问题是我的 InfoWindow 内容还没有准备好进行 DOM 操作。

---

因此，感谢question，我添加了一个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;
    );

  

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

【讨论】：

太棒了。这对我有帮助。