Question

我正在开发一个jQuery控件，可以将Google地图添加到页面中。

到目前为止一切顺利。

作为其中的一部分，我添加了一些自定义控件，允许我在特定位置放置一个标记（用户主位置，navigator.geolocation.getCurrentPosition）;再次，到目前为止一切顺利。

在我的自定义控件中，我还有一个地址输入字段，用户可以在其中输入搜索地址。如果我得到一个匹配，我可以轻松添加标记。如果我得到多个结果，我想在自定义控件中添加一组链接，然后用户可以单击以选择。

这就是问题所在。我的代码会很好地渲染链接，但是我无法将DomListener附加到它们上面。

这是将我的链接呈现为自定义控件

中的DIV的代码

if (results.length > 1 || results[0].partial_match) {
    $(element).data("addressResults", results);
    var html ="<div>Did you mean?<br /><ul>";
    for (var i=0; (i< results.length && i < 6); i++) {
        html+= '<li><a class"selectLocation" ' +
          'item="'+i+ '" >' + results[i].formatted_address+'</a></li>';
    }
    html+= '</ul></div>';
    html+= '<a class="closeAddressResults">None of these - Back to map</a>'
    resultsPanel // previously defined jQuery selector that works fine
        .html(html)
        .removeClass('error')
        .slideDown();
}

正如我所说，这会使事情变得正常并导致正确放置与“selectLocation”类的链接

通常，我要做的是使用jQuery作为$（document）.on（“click”，“。selectLocation”，function（e，data）{...}）;但这是不可能的。

作为替代方案，我希望能够做的事情（那是行不通的）是创建一个dom监听器

var selectAddressCtrl = document.getElementByClassName('selectAddress');
google.maps.event.addDomListener(selectAddressCtrl, 'click', function(e) {...}

然而，这在任何地方似乎都不起作用。

问题似乎是动态创建链接，而Google只将事件附加到已存在的项目。我可以保留bindign事件，但我担心创建它的多个实例。

有人有任何建议吗？

Answer 1

安德鲁的评论是正确的 - 我发现这项工作的唯一方法是按照Google文档建议和绑定的方式创建UI元素。

即。

foreach (linktoAdd)
    var link = document.createElement('a');
    (set link properties)
    google.maps.event.addDomListener(link, 'click', function(e) {...});
    (add element to UI)
}

将自定义控件动态添加到Google地图并触发事件

1 个答案: