Добавление события в элемент в Google Maps API InfoWindow - PullRequest
Новая
       33

Добавление события в элемент в Google Maps API InfoWindow

22 голосов
/ 17 июня 2011

Я хочу поместить форму с полем ввода и кнопку отправки в InfoWindow API Карт Google (v3).

При отправке я хотел бы вызвать функцию, которая запускает службу маршрутов, используя адрес, введенный в поле ввода.

Вот мой код (в настоящее время я только проверяю, запускается ли событие указания направления. Я написал полное событие getDirections() и могу подтвердить, что оно работает и возвращает направления при правильном срабатывании):

Я пытался добавить прослушиватель событий с помощью MooTools, например: 

var infoWindowContent   = "<b>Get Directions From...</b><br />"
                        + "<form id='map-form'>"
                        + "Address/Postcode: <input id='map-from-address' type='text' />"
                        + "<input type='submit' id='map-go' value='Go' />"
                        + "</form>";

var infoWindow = new google.maps.InfoWindow({
    content: infoWindowContent
});

google.maps.event.addListener(marker, 'click', function() {
    infoWindow.open(map, marker);
    dbug.log($("map-form"));
    $("map-form").addEvent("submit", getDirections);
});

function getDirections(event)
{
    dbug.log("getDirections");
    event.stop();
}

Поскольку я использую MooTools в другом месте моего сайта, я поместил весь код в window.addEvent('load', function(){...});

Обратите внимание на трассировку консоли dbug.log($("map-form"));, которая правильно выводит элемент формы, но событие не запускается.

Я добавил это событие в другую форму (с другим идентификатором) в DOM, и оно отлично работает.

Итак, если MooTools может найти элемент и предположительно добавить прослушиватель событий, что мешает запускать событие? Это проблема объема?

1 Ответ

47 голосов
/ 17 июня 2011

это не похоже на проблему области видимости. getDirections находится в той же области видимости.

это яйцо против курицы. в конечном итоге - ваша строка html не находится в DOM, поэтому вы не можете просто добавить к ней события или ссылаться на ее элементы. информационное окно слегка асинхронно, поэтому вам нужно убедиться, что контентный div подключен. Или вам нужно использовать делегирование событий.

шаблон событий, предоставляемый Google, очень удобен, чтобы прикрепить обработчик отправки к элементу domready div следующим образом: 

var infoWindowContent = [
    "<b>Get Directions From...</b><br />",
    "<form id='map-form'>",
    "Address/Postcode: <input id='map-from-address' type='text' />",
    "<input type='submit' id='map-go' value='Go' />",
    "</form>"
].join("");


var info = new google.maps.InfoWindow({
    content: infoWindowContent
});

google.maps.event.addListener(info, 'domready', function() {
    document.id("map-form").addEvent("submit", function(e) {
        e.stop();
        console.log("hi!");
    });
});

info.open(map, marker);

проверено и работает. В качестве альтернативы, вы можете прикрепить строку содержимого в dom как дочерний элемент некоторого скрытого элемента div, добавить событие и затем передать элемент div в качестве содержимого, поскольку оно поддерживает указание на узел.

https://developers.google.com/maps/documentation/javascript/infowindows

альтернативно, вы можете использовать делегирование событий

например.

topnode.addEvent('submit:relay(#map-form)', function(e){ }); - или эквивалентный jQuery, например $(document).on('submit', '#map-form', fn)

...