問題描述

我已經搜索了好幾個小時，希望你能幫助我:)

Hi I have searched since many hours, I hope you can help me :)

如果您單擊谷歌地圖上的信息窗口，我想顯示一個頁面.(使用 Ionic 2 中的 ModalController)

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

點擊不起作用..

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 函數..

Sadly this doesn't work, I tried also with a content node, with onclick="", with javascript functions..

這是另一個未解決的問題.

最好的問候，路易斯

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

  }

推薦答案

解決方案

感謝丹尼爾庫克和

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

-> 問題是我的 InfoWindow 內容還沒有準備好進行 DOM 操作.

-> The problem was my InfoWindow content wasn't ready for the DOM manipulation.

因此，感謝這個 domready 偵聽器-api-infowindow">問題.

So, I added a domready listener thanks to this question.

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

  }

再次感謝丹尼爾的耐心等待！:)

Thank you again Daniel for your patience ! :)

這篇關于單擊 InfoWindow Typescript Angular2的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！