来自数据库的 Gmap 信息窗口，里面有一个按钮答案

【问题标题】：Gmap infowindow from database with a button inside来自数据库的 Gmap 信息窗口，里面有一个按钮
【发布时间】：2018-06-15 19:41:06
【问题描述】：

我使用 JAVASCRIPT GOOGLE MAPS API，我使用 PHP REST API 从数据库中获取数据（关于我的应用程序的每个用户及其位置的信息），然后我使用这些数据在每个信息窗口中为每个标记制作信息窗口有我之前得到的数据，还有一个推送到页面的按钮，每个信息窗口都包含一个推送到不同页面（配置文件页面）的按钮。

例如，如果我有 2 个标记，我们将它们命名为 A 和 B：

如果我单击标记 A，它的信息窗口会显示，然后单击标记 B，它的信息窗口会显示，但标记的 A 信息窗口不会关闭

推送到页面的按钮有点麻烦，有时他会多次推送。希望你们能帮助我，这是我的代码：

this.service="maconnerie";
var url='http://192.168.1.3/api/v1/positions';
this.data =this.http.get(url);

let infowindow= new google.maps.InfoWindow(); 
this.data.subscribe(data=>{



  let clickableItems;
  for(var i=0;i<data.length;i++)
  {

    let marker;
    let clickableItem;
    let rat=data[i].rating;
    let rating;
    let profilButton="clickable";

    if(data[i].metier==this.service){
   var ouvrier=data[i].firstname+' '+data[i].lastname;
   console.log(data[i].lat,',',data[i].lon);
   var d=this.getDistanceFromLatLonInKm(this.la,this.lo,data[i].lat,data[i].lon);
   console.log(d+" "+this.la+" "+this.lo);
   if (d<=50) {
   var Latlng = new google.maps.LatLng(data[i].lat,data[i].lon);
     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)
    },

    });



    if (rat<=1){rating="1.jpg"};
    if (rat>1&&rat<2){rating="1v.jpg"};
    if (rat==2){rating="2.jpg"};
    if (rat>2&&rat<3){rating="2v.jpg"};
    if (rat==3){rating="3.jpg"};
    if (rat>3&&rat<4){rating="3v.jpg"};
    if (rat==4){rating="4.jpg"};
    if (rat>4&&rat<5){rating="4v.jpg"};
    if (rat==5){rating="5.jpg"};
    let idz=data[i].idprof;
    let that=this;
    let profilpic=data[i].profilpic;




    google.maps.event.addListener(marker, 'click', event => {
      infowindow.close(); // Close previously opened infowindow
      infowindow.setContent("<style  type='text/scss' src='gmap.scss'></style><div class='infowindow'><center><img class='profilpic' src='assets/imgs/profilpics/"+profilpic+".png'><br><img class='rating' src='assets/rating/"+rating+"'></center><input type='button' id='clickableItem"+idz+"' class='buttonProfil' value='Profil'></div>");
      infowindow.open(this.map, marker);

  });
  google.maps.event.addListener(infowindow, 'load', () => {

    console.log("clickableItem"+idz);
  clickableItem = document.getElementById("clickableItem"+idz);

 clickableItem.addEventListener('click', () => {
   that.zone.run( () => {
     console.log("user: "+idz);
   that.navCtrl.push(ProfilPage, {
     profilId: idz
 });

   });


 });
});

}

  }
}

感谢阅读

【问题讨论】：

只创建 1 个 Infowindow 对象并使用其setContent() 方法。
Google map API v3 - Add multiple infowindows的可能重复
这确实解决了信息窗口问题，但没有解决推送到第一页的按钮，我用当前代码编辑了我的帖子

标签： javascript angular typescript ionic-framework google-maps-api-3

【解决方案1】：

我修复了它，我使用Google map API v3 - Add multiple infowindows 修复了 infowindows 问题，并将按钮侦听器更改为：

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

    console.log("listener infowindow => clickableItem"+idz);
  var clickableItem = document.getElementById("clickableItem"+idz);

 if (clickableItem) { clickableItem.addEventListener('click', () => {
   that.zone.run( () => {
    console.log("listenerclick => clickableItem"+idz);
   that.navCtrl.push(ProfilPage, {
     profilId: idz
 });

   });


 });

}
});

【讨论】：