我正在使用谷歌地图 v3 进行编码。我想添加 jQuery 并将事件处理程序附加到 infoBubble(我在这里得到的可定制的 infoWindow jscript 扩展)。
具体来说,我想让用户点击 infoBubble 中的链接并使用 jQuery-UI 弹出一个对话框。对话框将提示用户输入,随后将存储在 MySQL 中。
我已经坚持了一个月。这是我最接近的事情:
下面是我用于创建地图标记的 javascript 函数:
(注意:这个想法是如果将事件处理程序附加到 infoBubble 有效,我会function() {alert("hi!");}
用 jQuery-UI 表单替换。但它不起作用。我尝试使用“ var str = 'onClick=formPopUp()';
”但 javascript 不支持具有多个条目的提示对话框表单.另外,我真的不知道如何在像formPopUp()这样的javascript函数中调用jQuery-UI。对不起,如果它令人困惑)
function createMarker(map, latlng, fields, name) {
var str = "id='user-creates'";
var html = "<b><font size='5'>" + fields["name"] + "</font></b>" + "</br>" +
"<font size='2'>" + fields["google_rating"] + " / 5.00" + "</font>" + "</br>" +
"<font size='2'>" + fields["type"] + "</font>" + "</br>" +
"<font size='2'>" + "Hours" + "</font>" + "</br>" +
"</br>" +
"</br>" +
"<font size='2'>" + "Top Reviews " + "(<i>" + fields["num_reviews"] + " Reviews</i>)" + "</font>" + "</br>" +
"<div " + str + ">" + "Example</div>" +
"</br>" +
"</br>" +
"<font size='2'>" + "Photos " + "(<i>0 Photos</i>)" + "</font>" + "</br>" +
"</br>" +
"</br>" +
"<font size='2'>" + "Friends Who've Been Here " + "(<i>0 Friends</i>)" + "</font>" + "</br>" +
"</br>" +
"</br>" +
"<font size='2'>" + fields["address"] + "</font>" + "</br>" +
"<font size='2'>" + fields["phone_num"] + "</font>" + "</br>" +
"<font size='2'><a href=" + fields["web_url"] + "Website" + "</a></font>";
var marker = new google.maps.Marker({
map: map,
position: latlng
});
infoBubble = new InfoBubble({
map: map,
position: latlng,
borderColor: '#D14836',
borderWidth: 4,
});
google.maps.event.addListener(marker, 'click', function() {
infoBubble.setContent(html);
google.maps.event.addListenerOnce(infoBubble, 'domready', function(){
//jQuery code here
google.maps.event.addDomListener($(infoBubble.getContent()).find('#user-creates')[0],
'click', function() {alert("hi!")});
});
infoBubble.open(map, marker);
});
}