向 Google Maps API InfoWindow 内的元素添加事件 [英] Adding event to element inside Google Maps API InfoWindow

问题描述

我想在 Google Maps API (v3) InfoWindow 中放置一个带有输入字段和提交按钮的表单.

提交后，我想调用一个函数，该函数使用输入字段中输入的地址启动路线服务.

这是我的代码(我目前只测试是否触发了方向事件.我已经编写了完整的 getDirections() 事件并且可以确认它工作并在正确触发时返回方向):

我尝试使用 MooTools 添加事件侦听器，如下所示:

var infoWindowContent = "<b>从...获取路线</b><br/>"+ "
"+ "地址/邮政编码:<input id='map-from-address' type='text'/>"+ "<input type='submit' id='map-go' value='Go'/>"+ "</form>";var infoWindow = new google.maps.InfoWindow({内容:信息窗口内容});google.maps.event.addListener(marker, 'click', function() {infoWindow.open(地图，标记)；dbug.log($("map-form"));$("map-form").addEvent("submit", getDirections);});函数 getDirections(event){dbug.log("getDirections");事件.停止()；}

当我在我网站的其他地方使用 MooTools 时，我将所有代码放在 window.addEvent('load', function(){...});

注意控制台跟踪 dbug.log($("map-form")); 正确输出表单元素，但事件没有触发.

我已将相同的事件添加到 DOM 中的另一个表单(具有不同的 ID)，并且工作正常.

那么，如果 MooTools 可以找到元素并添加事件侦听器，是什么阻止了事件触发?这是范围问题吗?

解决方案

它看起来不像是范围问题.getDirections 在同一范围内.

这是鸡蛋对鸡的案例.最终 - 您的 html 字符串不在 DOM 中，因此您无法向其添加事件或从中引用元素.信息窗口略微异步，因此您需要确保附加了内容 div.或者，您需要使用事件委托.

谷歌提供的事件模式可以方便地将提交处理程序附加到 div 的 domready 上，如下所示:

var infoWindowContent = ["<b>从...获取路线</b><br/>","","地址/邮政编码:<input id='map-from-address' type='text'/>","<input type='submit' id='map-go' value='Go'/>",</表单>"].加入("");var info = new google.maps.InfoWindow({内容:信息窗口内容});google.maps.event.addListener(info, 'domready', function() {document.id("map-form").addEvent("submit", function(e) {e.stop();console.log("嗨！");});});info.open(地图，标记)；

经过测试和工作.或者，您可以将内容作为某些隐藏 div 的子项附加到 dom 中，添加事件，然后将 div 作为内容传递，因为它支持指向节点.

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

或者，您可以使用事件委托

例如

topnode.addEvent('submit:relay(#map-form)', function(e){ }); - 或等效的 jQuery，例如 $(document).on('submit', '#map-form', fn)

I want to put a form with input field and submit button inside a Google Maps API (v3) InfoWindow.

When submitted I would like to call a function that initiates the directions service using the address entered into the input field.

Here's my code (I'm currently only testing whether the directions event is being fired. I've written the full getDirections() event and can confirm it works and returns directions when fired properly):

I tried adding an event listener using MooTools, like this:

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

As I'm using MooTools elsewhere in my site, I put all the code in window.addEvent('load', function(){...});

Note the console trace dbug.log($("map-form")); which is correctly outputting the form element, but the event isn't firing.

I've added the same event to another form (with different ID) in the DOM and it works fine.

So, if MooTools can find the element and supposedly add the event listener, what's preventing the event from firing? Is this a scope issue?

解决方案

it does not look like a scope issue. getDirections is in the same scope.

this is an egg vs chicken case. ultimately - your string of html is not in the DOM so you cannot add events to it just yet or reference elements from it. the info window is slightly asynchronous so you need to make sure the content div is attached. Or, you need to use Event delegation.

the event pattern google provides comes in handy to attach the submit handler on the div's domready like so:

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

tested and working. alternatively, you can attach the content sting into the dom as child of some hidden div, add the event and then pass on the div as the content as it supports being pointed to a node.

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

alternatively, you can use event delegation

eg.

topnode.addEvent('submit:relay(#map-form)', function(e){ }); - or the equivalent jQuery, for instance $(document).on('submit', '#map-form', fn)

这篇关于向 Google Maps API InfoWindow 内的元素添加事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！