我正试图将单击事件绑定到我的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;
}
$(document).on('click', '.email', function(e){...});应该可以工作。
结果证明这就是解决方案，尽管它可能与您可能需要的有点不同:
google.maps.event.addListener(sonypro.locator.map.markers[i], 'click', function () {
//do stuff
}