добавить обработчик события в информационное окно элемента google maps v3 - PullRequest
Новая
       16

добавить обработчик события в информационное окно элемента google maps v3

3 голосов
/ 08 июня 2011

привет, я пытаюсь добавить к кнопке внутри информационного окна событие, которое я пробовал вот так 

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

Ответы [ 3 ]

5 голосов
/ 08 июня 2011

Попробуйте атрибут "onclick" для кнопки. 

'<input type="button" id="btnPrueba" value="prueba" onclick="removeMarker()"/>'
1 голос
/ 12 марта 2016

Вызов глобальной функции, подобной показанной в @ DeeV, действительно кажется самым прямым выстрелом (за исключением того, что загрязняет глобальное пространство имен пачкой, которая в наши дни опускается). Делегирование событий jQuery работает без какой-либо дополнительной гимнастики setTimeout, но ощущается как более тяжелый стек вызовов функций для достижения той же цели. например, 

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

Однако, придерживаясь глобального подхода, поверх ответа @ DeeV, часто уловка заключается в получении некоторых контекстных значений, на которые вы можете воздействовать в этом обработчике событий:

  • одним из способов является встраивание значений параметров в вызов функции в Строка содержимого InfoWindow
  • вдоль этих линий, когда вы генерируете каждый маркер, нажмите это ссылка на массив (также обязательно глобальный) и тем самым облегчает Маркер API вызывает позже в обработчике (например, setIcon () и т. Д.)

например. JS псевдокод 

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+')"/>' });
}
0 голосов
/ 05 сентября 2014

Мой обходной путь - использовать короткий тайм-аут. 

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() уже были вызваны.Я предполагаю, что это означает, что создание выполняется асинхронно.

ПРИМЕЧАНИЕ: "50" - это магическое число, поэтому оно может быть хрупким.

ПРИМЕЧАНИЕ: при использовании следующего также не работа для меня, которую я все еще нахожу странной и не могу объяснить: 

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