javascript - 信息窗口谷歌地图中的 Ionic 2 单击事件

标签 javascript html google-maps ionic2 infowindow

您好,我正在尝试通过 google map 信息窗口内的按钮触发事件。 问题是我无论如何都不能让它开火。

addMarket(latitud, longitud, sensorData) {

let marker = new google.maps.Marker({
  draggable: false,
  position: { lat: latitud, lng: longitud },
  map: this.map,//set map created here
  title: sensorData.sensor
});
marker.addListener('click', function () {
  infowindow.open(this.map, marker);
});

let bodyMessege = 'Nombre del Sensor: ' + sensorData.sensor + '<br>' +
  'Componente Descripcion: ' + sensorData.componentDesc + '<br>' +
  ' description:  ' + sensorData.description + '<br>' +
  ' Tipo de sensor: ' + sensorData.type + '<br>' +
  ' Unidad de sensor: ' + sensorData.unit + '<br>' +
  'Tipo de dato: ' + sensorData.dataType + '<br>' +
  '  <button ion-button (click)="this.navCtrl.push(DetalleSensorPage)" >Default</button>';

//      ' <button ion-button=""  onclick=console.log("log");'  anda
//this.pushPage=DetalleSensorPage;
var infowindow = new google.maps.InfoWindow({
  content: bodyMessege
});

欢迎任何提示,谢谢。 :)

最佳答案

我为我自己的项目找到了这个解决方案:( https://forum.ionicframework.com/t/ng-click-in-google-maps-infowindow/5537/6 )

关键元素是您在下面的 getElementbyId 中查找的 id="tap"。

let content = '<div class="infowindow"><p id="tap">your text here</p></div>';

let infoWindow = new google.maps.InfoWindow(
  {
    closeBoxURL: "",
    content: content
  }
);
infoWindow.open(this.map, marker);

google.maps.event.addListenerOnce(infoWindow, 'domready', () => {
  document.getElementById('tap').addEventListener('click', () => {
    //alert('Clicked');
    console.log("touch");
    this.closeInfoViewWindow(infoWindow);
    this.openEventDetailModal(event);
  });
});

希望这对您和其他人有帮助。

关于javascript - 信息窗口谷歌地图中的 Ionic 2 单击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46741066/

相关文章:

javascript - Angular 2 : execute a function when the element appears on the screen

javascript - 如何在 Onclick 上获取选择器的变量

css - Bootstrap CSS - 导航栏列表从新行开始换行。如何使 <ul> 从当前行开始换行?

javascript 函数返回未定义

google-maps - 未找到 Google map 嵌入 API 地址

javascript - 获取被点击的特定按钮的 ID。

javascript - LokiJS 支持 ISO-8601 日期格式吗?

javascript - 水平滚动图像缩略图并在鼠标悬停时弹出图像

javascript - 如何根据最接近输入地址的纬度/经度显示内容

javascript - 列上带有单选按钮的 ExtJS GridPanel