Question

我正在使用JAVASCRIPT GOOGLE MAPS API，使用PHP REST API从数据库获取数据（关于我的应用程序的每个用户的信息及其位置），然后使用这些数据为每个标记创建信息窗口，在每个信息窗口内有我之前获得的数据以及一个推送到页面的按钮，每个infowindow包含一个按钮推送到另一个页面（Profil页面）。

如果我有2个标记，问题在于示例，请将它们命名为A和B：

如果我点击标记A它的信息窗口出现然后点击标记B它infowindow显示但标记的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
 });

   });


 });
});

}

  }
}

感谢您阅读

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

   });


 });

}
});

Gmap infowindow来自数据库，里面有一个按钮

1 个答案: