2011-06-06 62 views
0

我有一個有趣的問題,我的班級的任務,我們應該有一個jQuery-UI模式對話框出現時,用戶點擊一個谷歌地圖。谷歌地圖和jQuery UI對話框

在我的第一個示例中,我使用jQuery-UI模式對話框可以在與地圖相同的頁面上正常工作。 http://ymartino.userworld.com/map-practice3a.html

然而,在我的第二個例子中,當我嘗試將它集成到地圖本身中時,Modal div會出現,但對話框不會。 http://ymartino.userworld.com/map-practice3b.html

編輯 我懷疑的問題是,一些可能僅僅是不正確的順序。

回答

1

下面是一個例子來說明它是如何完成的。

爲了便於理解,我保留了一些您嘗試的元素(如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> 
+0

啊,我明白你在那裏做了什麼;所以它是無序的,非常感謝。 我同意$ .ready()的建議,我也會做這個改變。 再次感謝。 – VikingGoat 2011-06-07 03:14:29