Google maps - привязать событие клика к тегу <a> внутри infoBubble
Я пытаюсь привязать событие click к тегу внутри моего 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;
}
2 ответа
Решение
Это оказалось решением, хотя оно может немного отличаться от того, что вам может понадобиться:
google.maps.event.addListener(sonypro.locator.map.markers[i], 'click', function () {
//do stuff
}
$(document).on('click', '.email', function(e){...}); должно сработать.