Question

我有一个Google Maps InfoWindow。 InfoWindow的内容来自我的JS中名为contentString的变量。

//content of InfoWindow
contentString = 
'<div class="alertPreview">
    <img class="alertPreviewImage" src="">
    <h3 class="alertPreviewTitle">' + 
        document.alertName + 
    '</h3> 
    <h6 class="alertPreviewLocation">' + 
        document.alertMunicipality + 
        '' + 
        document.alertProvince + 
    '</h6>
    <text class="alertPreviewContent">' + 
        document.alertDetails +
        '</br>
    </text>
    <button type="button" id="moreDetailsButton" class="btn btn-link alertDetailsButton">
        More Details 
     </button>
 </div>'

请注意，上面代码中的单引号是JS中的刻度。

我想访问contentString中的按钮，以便触发模式/弹出窗口。我在考虑以下几点：

以某种方式将Meteor模板放在我的contentString中，然后使用模板事件作为按钮。
我可以添加一个事件监听器。我打印时我的按钮值 console.log($('#moreDetailsButton').html()) 但我不能将它用于我的事件监听器：
```
google.maps.event.addListener($('#moreDetailsButton').html(), 'click', function(
    console.log('button clicked')
})
```

我做错了什么？我错过了什么？有什么建议吗？

Answer 1

您应该能够以正常流星方式从包含地图的模板访问事件：

Template.map.events({
   "click #moreDetailsButton": function(e,t){ 
      console.log('hello');
   } 
})

你可以在infowindow中使用一个模板，但我发现这很奇怪，因为模板在声明infowindow时呈现时不会被反应。我发现更简单的方法是使用普通模态而不是提供的infowindow。编辑：为了显示正确的数据，您可以使用标记的ID（或实例化标记时可用的任何数据）和会话变量：

  marker.addListener('click', function() {
     Session.set('iwModalData', marker.id);
     $('#alertPreviewModal').modal('show');
  });

然后从会话变量信息中显示模态模板中的正确内容。如果您想要显示的唯一内容是标记的ID：

Template.iwModalContent.helpers({
   "iwContent": function(){
      return Session.get('iwModalData');
   }
})

如何使用Meteor中的infowindow按钮触发模态/弹出窗口？

1 个答案: