javascript - Sencha touch 2：在谷歌地图信息窗口上添加一个按钮

Question

我正在尝试在 Google 地图信息窗口 ( https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple ) 上添加链接或按钮，并使用我的 sencha touch 处理“点击”事件控制器。我的代码不起作用。基本上我想要做的是用原生 Javascript 触发一个事件并将它收听到我的控制器中。

在这里，我在标记上添加信息窗口：

        google.maps.event.addListener(marker, 'click', function() {

                    me.selectedMarker = marker;

                    // info window
                    var contentString = "'<div id='content'>"
                            + "<h1 id='firstHeading'>{0}</h1>"
                            + "<div id='bodyContent'>{1}</div>" +
                                    "<div id='detailLink' onClick=\"fireEvent(this, 'tap')\" style='text-decoration: underline'>" +
                                    "TAP ME TO OPEN THE DETAIL" +
                                    "</div>" +
                                    "</div>"

                    contentString = contentString.format(punto.label, punto.descBreve);

                    if (me.infowindow) {
                        me.infowindow.close();
                    }

                    me.infowindow = new google.maps.InfoWindow({
                                content : contentString
                            });

                    me.infowindow.open(me.getMap(), marker);

                });

我的 index.html 中的 fireEvent 函数，它运行时没有任何异常：

function fireEvent(element, event) {

    if (document.createEventObject) {
        // dispatch for IE
        var evt = document.createEventObject();
        return element.fireEvent('on' + event, evt)
    } else {
        // dispatch for firefox + others
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent(event, true, true); // event type,bubbling,cancelable
        return !element.dispatchEvent(evt);
    }
}

我的控制器中的事件处理程序（它从未被调用）

    control : {
        '#detailLink' : {
            tap : function(){ alert('tapped')},
            click : function(){ alert('clicked')}
        }
    }

一次只显示一个信息窗口。

Answer 1

这是一个干净的解决方案：

google.maps.event.addListener(marker, 'click', function() {


            var contentString = "'<div id='content'>"
                    + "<h1 id='firstHeading'>{0}</h1>"
                    + "<div id='bodyContent'>{1}</div>"
                    // + "<div id='detailLink' onClick=\"fireEvent(this, 'tap')\" style='text-decoration: underline; padding : 6px'>"
                    + "<div id='detailLink' style='text-decoration: underline; padding : 6px'>"
                    + "TAP ME TO OPEN THE DETAIL" + "</div>" + "</div>"

            contentString = contentString.format(punto.label,
                    punto.descBreve);

            if (me.infowindow) {
                me.infowindow.close();
            }

            me.infowindow = new google.maps.InfoWindow({
                        content : contentString
                    });

            me.infowindow.open(me.getMap(), marker);

            // short delay
            setTimeout(function() {
                        var iw = Ext.get('detailLink');
                        iw.addListener({
                                    tap : function() {
                                        // do what you need
                                    }
                                });
                    }, 100);

        });

不再需要 fireEvent index.html 上的函数。