【问题标题】:Ionic 2 click event inside infowindow googlemaps信息窗口谷歌地图内的离子2点击事件
【发布时间】:2018-03-26 05:57:24
【问题描述】:

您好,我正在尝试从谷歌地图信息窗口内的按钮触发事件。 问题是我无论如何都不能让它着火。

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

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

【问题讨论】:

  • 我能够解决它,但我不确定它是否是相同的场景。我的要求是只显示一个信息视图并在其中包含一个按钮。因此,如果您首先打开一个信息视图,然后单击另一个标记,则第一个信息视图将关闭,并且只会显示新的信息视图。这样可以吗?
  • 这是相同的要求,一次只显示一个弹出窗口,当按下标记时,信息窗口显示信息并有一个按钮重定向到另一个页面,显示更多详细信息。我尝试从按钮调用一个函数,但我什至无法让控制台日志工作。
  • 如果有帮助,您可以look at my code 进行类似的实现,在单击地图区域时我会打开 InfoWindow。仅供参考,这也是一个 Ionic 2 应用程序。

标签: javascript html google-maps ionic2 infowindow


【解决方案1】:

我为自己的项目找到了这个解决方案:(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);
  });
});

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

【讨论】:

    猜你喜欢
    • 2014-01-16
    • 2013-12-28
    • 1970-01-01
    • 1970-01-01
    • 2011-04-29
    • 1970-01-01
    • 1970-01-01
    • 2014-02-02
    • 2018-12-27
    相关资源
    最近更新 更多