我有一个绘制多个标记的 Google map ，我需要为标记提供单击事件来显示弹出窗口，以下代码对信息窗口执行此操作，但我想使用 Jquery ui 弹出对话框而不是信息窗口。弹出窗口必须显示来自 div 的信息，该 div 的样式属性显示为“无”，有人可以帮助解决这个问题，请帮忙。
enter code here
<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
function initialize()
{
var mapProp = {
center:myCenter,
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker=new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
$("#mypopup").dialog();
//infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
<div id="mypopup" style="display:none"> <div>
</body>
</html>
最佳答案
试试这个:http://jsfiddle.net/lotusgodkk/x8dSP/3525/
JS:
var myCenter = new google.maps.LatLng(51.508742, -0.120850);
function initialize() {
var mapProp = {
center: myCenter,
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var marker = new google.maps.Marker({
position: myCenter,
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content: "Hello World!"
});
google.maps.event.addListener(marker, 'click', function () {
console.log('clicked')
//$("#mypopup").dialog();
var dialog = $("#mypopup").dialog({
buttons: {
"Yes": function () {
alert('you chose yes');
},
"No": function () {
alert('you chose no');
},
"Cancel": function () {
dialog.dialog('close');
}
}
});
//infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
HTML:
<div id="googleMap"></div>
<div id="mypopup">Hello</div>
CSS:
#googleMap {
height: 380px;
width: 500px;
}
#mypopup {
display:none;
}
关于javascript - 谷歌地图标记上的 jquery ui 对话框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24238151/