【问题标题】:GoogleMap infowindow push onclick on a buttonGoogleMap infowindow push onclick on a button
【发布时间】:2018-11-24 19:32:29
【问题描述】:

我使用 Googlemap JS API,我从我的数据库中获取了一些标记和一个 infowindow foreach 标记,在每个 infowindow 上我有一个按钮希望推送到具有某个变量的另一个页面,我尝试使用 ngZone,我不是很熟悉有了它,但我试过 x),这是我的代码:

  // GET request to get data from database
  for(var i=0;i<data.length;i++)
  {

   var ouvrier=data[i].firstname+' '+data[i].lastname; //Getting data from db

   var Latlng = new google.maps.LatLng(data[i].lat,data[i].lon);
     var marker = new google.maps.Marker({
      position: Latlng,
      map: this.map,
      labelAnchor: new google.maps.Point(22, 0),
      draggable:false,
      icon: { url : 'assets/imgs/worker.png',scaledSize: new google.maps.Size(70, 70)
    },

    });




    var infowindow = new google.maps.InfoWindow({
      content: "Name: "+ouvrier+" <input type='button' id='clickableItem' value='consulter profile' >"
    }); 

    google.maps.event.addListener(infowindow, 'domready', () => {

      var clickableItem = document.getElementById('clickableItem');
      clickableItem.addEventListener('click', () => {
        this.zone.run( () => { //Im using ngZone
          console.log("wlidoz "+ data[i].idprof);
        this.navCtrl.push(ProfilPage, {
          profilId: data[i].idprof // PROBLEM HERE
      });

        });


      });
    });

  marker.addListener('click', event => {
    infowindow.open(this.map, marker);
    });

}

一切正常,地图正在加载..等 但是当我点击那个按钮时,什么都没有发生,我试图在 ngZone 内控制台.log data[i].idprof 但它未定义,但在监听器之前,console.log 正在工作

【问题讨论】:

    标签: javascript google-maps typescript ionic-framework


    【解决方案1】:

    我修复了它,我只是在 google.maps.event.addLister 之前声明了一个变量:

    let idz=data[i].idprof;
        let that=this;
        google.maps.event.addListener(infowindow, 'domready', () => {
    
          var clickableItem = document.getElementById('clickableItem');
          clickableItem.addEventListener('click', () => {
            that.zone.run( () => {
            that.navCtrl.push(ProfilPage, {
              profilId: idz
          });
    
            });
    
    
          });
        });
    

    如果有人有更好的解决方案,我会接受它

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2010-12-20
      • 2011-04-24
      • 1970-01-01
      • 2022-11-09
      • 1970-01-01
      • 2021-05-28
      • 2013-10-25
      相关资源
      最近更新 更多