e.g。 JS Pseudocode

Question

嗨我正试图在信息窗口中添加一个按钮，我尝试了这样的事件

var infoWindow = new google.maps.InfoWindow({
    content: '<div></br><span class="formatText">Ubicacion del Marcador: </span>' + event.latLng.toString() 
            + '</br> <input type="button" id="btnPrueba" value="prueba"/></div>'
});

google.maps.event.addListener(marker, 'click', function () {
    infoWindow.open(map, this);
    google.maps.event.addDomListener(document.getElementById('btnPrueba'), 'click', removeMarker);
});

function removeMarker(){

    alert('it works');
}

我做错了什么？或者这是另一种方法吗？感谢

修改

我也尝试过像这样的jquery但是虽然事件是由函数得到的警报没有显示。当我使用chrome进行调试时，它可以正常工作：（

google.maps.event.addListener(marker, 'click', function () {
    infoWindow.open(map, this);
    $("#btnPrueba").click(function () {

        alert('funciona');
    });
});

Answer 1

尝试按钮的“onclick”属性。

'<input type="button" id="btnPrueba" value="prueba" onclick="removeMarker()"/>'

Answer 2

调用像@ DeeV这样的全局函数看起来确实看起来像是最直接的镜头（除了弄脏全局命名空间这些天被忽视的微笑）。 jQuery事件委托在没有任何额外的setTimeout体操的情况下工作，但感觉就像一个较重的函数调用堆栈来实现相同的目标。 e.g。

$("#myMapContainer").on("click", "#btnPrueba", function() {alert "it works";});

然而，在@ DeeV的答案之上，坚持使用全局方法，通常的诀窍是获得一些您可以在该事件处理程序中处理的上下文值：

一种方法是将参数值嵌入到函数调用中 InfoWindow内容字符串
沿着这些线，当你生成每个Marker时，推它引用了一个数组（也一定是全局的），从而方便了稍后在处理程序中调用标记API（例如setIcon（）等）

e.g。 JS Pseudocode

var myMarkerArray = [];

function removeMarker(markerIndex) {
  myMarkerArray[markerIndex].setMap(null);
}

for(int i=0; i<myLocationData.length; i++) {
  var marker = new google.maps.Marker({...});
  myMarkerArray.push(marker);
  var popup = new google.maps.InfoWindow({ content: '<input type="button" id="btnPrueba" value="prueba" onclick="removeMarker('+i+')"/>' });
}

Answer 3

我的解决方法是使用短暂的超时。

var infoWindow = ...  (as in your question) ...
infoWindow.open(...);

setTimeout(function(){
  $('#btnPrueba').on('click', function(e){
    alert("It works at last!");
    });
  },50);  //Wait for 0.05s

当我没有使用setTimeout包装时，它不起作用。即使已经调用了setContent()和open()。我认为这意味着创建是异步完成的。

注意：＆＃34; 50＆＃34;是一个神奇的数字，所以可能很脆弱。

注意：使用以下内容也 not 为我工作，我仍然觉得很奇怪，无法解释：

$('#btnPrueba').on('click', document, function(e){
  alert("No luck...");
  });

在信息窗口中添加事件处理程序元素google maps v3

3 个答案:

e.g。 JS Pseudocode