谷歌地图-将点击事件绑定到infoBubble中的<a>标签

Question

我正在尝试将一个点击事件绑定到我的infoBubble中的一个标签上，不幸的是我一点运气都没有。这是我的代码和一些我尝试过的例子。

setTimeout(function () {

                    var options = {
                        zoom: 8,
                        mapTypeControl: false,
                        center: new google.maps.LatLng(sonypro.locator.map.defaults.lat,sonypro.locator.map.defaults.lon),
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    }

                    sonypro.locator.map.view = new google.maps.Map(document.getElementById(sonypro.locator.selector_id.map),options);

                    sonypro.locator.map.panorama = sonypro.locator.map.view.getStreetView();

                    google.maps.event.addListener(sonypro.locator.map.panorama, 'visible_changed', function() {
                        if (sonypro.locator.map.panorama.getVisible()) {
                            if (!$('#'+sonypro.locator.selector_id.sidebar).hasClass('closed')) {
                                $('#'+sonypro.locator.selector_id.handle_btn).click();
                            }
                            $('#'+sonypro.locator.selector_id.sidebar).hide();
                        } else {
                            $('#'+sonypro.locator.selector_id.sidebar).show();
                            if ($('#'+sonypro.locator.selector_id.sidebar).hasClass('closed')) {
                                $('#'+sonypro.locator.selector_id.handle_btn).click();
                            }
                        }
                    });

                    sonypro.locator.map.bounds = new google.maps.LatLngBounds();

                    if (sonypro.locator.map.dealers.length > 0) {


                        for (var i = 0; i < sonypro.locator.map.dealers.length; i++) {

                            var image = new google.maps.MarkerImage(
                                '/assets/images/content/markers/marker' + i + '.png',
                                new google.maps.Size(20, 34),
                                new google.maps.Point(0,0),
                                new google.maps.Point(9, 26)
                            );

                            var dealer = sonypro.locator.map.dealers[i];

                            //info as html
                            var info_content = sonypro.locator.list.template(dealer.name,dealer.address,dealer.telephone,dealer.email,dealer.website);

                            //set markers
                            var myLatLng = new google.maps.LatLng(dealer.lat, dealer.lng);
                            sonypro.locator.map.markers[i] = new google.maps.Marker({
                                id: dealer.id,
                                position: myLatLng,
                                map: sonypro.locator.map.view,
                                icon: image,
                                shape: {coord: [1, 7, 9, 25, 16, 7, 13 , 3, 9 , 1, 4 , 3],type: 'poly'},
                                title: dealer.name,
                                info: info_content
                            });


                            //set infobubble
                            var infoBubble = new InfoBubble({
                                map: sonypro.locator.map.view,
                                content: '',
                                position: myLatLng,
                                shadowStyle: 0,
                                padding: 15,
                                backgroundColor: 'rgb(255,255,255)',
                                minWidth: 160,
                                maxWidth: 240,
                                minHeight: 80,
                                maxHeight: 300,
                                borderRadius: 0,
                                arrowSize: 10,
                                borderWidth: 1,
                                borderColor: '#f36700',
                                disableAutoPan: true,
                                hideCloseButton: false,
                                arrowPosition: 18,
                                backgroundClassName: sonypro.locator.classes.infowindow,
                                arrowStyle: 0
                            });


                            //bounding
                            sonypro.locator.map.bounds.extend(myLatLng);
                            sonypro.locator.map.view.fitBounds(sonypro.locator.map.bounds);

                            //set infowindows
                            google.maps.event.addListener(sonypro.locator.map.markers[i], 'click', function () {
                                console.log('Something clicked');
                                var _lm = sonypro.locator.map.last_viewed_marker;
                                if (_lm == -1 || (_lm != -1 && _lm != this.id) || infoBubble.isOpen() == false) {
                                    infoBubble.content = this.info;
                                    infoBubble.open(sonypro.locator.map.view, this);
                                    sonypro.locator.map.view.setCenter(this.getPosition());
                                    sonypro.locator.map.last_viewed_marker = this.id;
                                }
                            });


                            $(infoBubble.bubble_).live("click", function() {
                                console.log('clicked!');
                            });


                            $(".icon.phne", infoBubble.bubble_).live("click", function() {
                              console.log('actived jimmy!');
                            });

                        }

                        sonypro.locator.list.init();

                    }

                }, 500);

上面的一些代码可能不相关，还有更多，但同样不确定所有这些都是必要的，但我可以在必要时发布所有这些代码。

我还尝试使用.live()和.on()，但都无济于事。

这是下面信息气泡内容的模板。而我试图将单击事件绑定到的图标的整个选择器是(.pge-dl-engagement .dealer-wrapper .dealer-infowindow a.icon.phne)

template: function (name,address,telephone,email,link) {
                var content = '',_name = '',_address = '',_telephone = '',_email = '',_link = '';
                if (!sonypro.helper.isEmpty(name)) _name = '<h3>'+name+'</h3>';
                if (!sonypro.helper.isEmpty(address)) _address = '<p>'+address+'</p><p class="display">'+telephone+'</p></div>';
                if (!sonypro.helper.isEmpty(telephone)) _telephone = '<div class="icons"><a class="icon phne"></a>';
                if (!sonypro.helper.isEmpty(email)) _email = '<a class="icon email" href="mailto:'+email+'"></a>';
                if (!sonypro.helper.isEmpty(link)) _link = '<a class="icon link" target="_blank" href="'+link+'"></a></div>';
                content = _name + _address + _telephone + _email + _link + '<div class="space cf">-</div>';
                sonypro.locator.list.html = sonypro.locator.list.html + '<li class="cf"><div class="dtls">' + content + '</li>';
                return content;
            }

Answer 1

事实证明，这就是解决方案，尽管它可能与您可能需要的有所不同：

google.maps.event.addListener(sonypro.locator.map.markers[i], 'click', function () {

//do stuff

}

Answer 2

$(document).on('click', '.email', function(e){...});应该可以工作。