單擊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

解

感謝Daniel Cooke的幫助

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

    });
});

注意：我從官方API的事件部分中提取了大部分內容 - 您應該檢查一下。