谷歌地图和jQuery UI对话框
问题描述:
我有一个有趣的问题,我的班级的任务,我们应该有一个jQuery-UI模式对话框出现时,用户点击一个谷歌地图。谷歌地图和jQuery UI对话框
在我的第一个示例中,我使用jQuery-UI模式对话框可以在与地图相同的页面上正常工作。 http://ymartino.userworld.com/map-practice3a.html
然而,在我的第二个例子中,当我尝试将它集成到地图本身中时,Modal div会出现,但对话框不会。 http://ymartino.userworld.com/map-practice3b.html
编辑 我怀疑的问题是,一些可能仅仅是不正确的顺序。
答
下面是一个例子来说明它是如何完成的。
为了便于理解,我保留了一些您尝试的元素(如onload="initialize()"
,我倾向于用$.ready()
替代)。我还删除了一些您可能需要的功能,但如果您了解自己的代码,则该功能应该很容易恢复。
希望你能够理解发生了什么,然后将你的理解运用到你的任务中。祝你好运!
<body onload="initialize()">
<script type="text/javascript">
function initialize() {
var location = new google.maps.LatLng(37.437412,-122.15641);
var myOptions = {
zoom:13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: location
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function(event) {
var $dialog = $("#dialog").dialog({
autoOpen: false,
title: 'Dialog Title',
modal: true
});
$dialog.dialog('open');
});
}
</script>
<div id="dialog"></div>
<div id="map_canvas" style="border: 1px solid black; position:absolute; width:398px; height:398px"></div>
</body>
啊,我明白你在那里做了什么;所以它是无序的,非常感谢。 我同意$ .ready()的建议,我也会做这个改变。 再次感谢。 – VikingGoat 2011-06-07 03:14:29