jQuery的對話窗口

內谷歌地圖API的JavaScript我使用谷歌地圖的JavaScript API顯示的地圖 - https://developers.google.com/maps/documentation/javascript/jQuery的對話窗口

有一些API中的某些功能，我需要的是靜態的地圖所沒有的。

所以這個頁面正常工作作爲一個獨立的頁面：

<!DOCTYPE html> 
<html> 
<head> 
<title>Map</title> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<meta charset="utf-8"> 

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 

<script> 


    function initialize() { 

     // Set map coordinates with lat and lng 
     var cord = new google.maps.LatLng(28.545078,-81.377196); 

     // Set map options 
     var mapOptions = { 
      zoom: 15, 
      center: cord, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     // Set map 
     var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions); 


     // Set map marker 
     var marker = new google.maps.Marker({ 
      position: cord, 
      map: map, 
      title: 'Test' 
     }); 

    } 


    // Load Map 
    google.maps.event.addDomListener(window, 'load', initialize); 



</script> 

</head> 

<body> 
<div id="map-canvas"style="width:600px; height:500px"></div> 
</body> 

</html>

我需要得到該頁面jQuery的對話窗口內工作。

我所說的對話框和加載外部頁面這樣的：那麼

<script type="text/javascript"> 

    $(document).ready(function() { 


     $("#cc").click(function(){ 

      $("#detailWin").dialog({ 
       autoOpen: false, 
       modal: true, 
       width:700, 
       height:600, 
       show: "fade", 
       close: "fade", 
       open: function() 
       { 
        $(this).load('p2.php'); 

       } 
      }); 

      $('#detailWin').dialog("open"); 


     }); 

    }); 

</script>

當我包括第一套代碼放到頁面maps.php這是行不通的。我意識到我不想在包含的頁面中包含所有和標籤。我一直在嘗試很多不同的方式，我無法讓地圖加載到對話窗口中。

我試過用jQuery加載地圖API URL $.getScript()但它沒有幫助。

如果任何人都可以幫助我找出最佳方法來獲得這項工作，將不勝感激，因爲我卡住了。

謝謝！

UPDATE：

我最終得到像這樣的工作（這第二頁maps.php）：

<script type="text/javascript"> 

$(document).ready(function() { 

    function initialize() { 

     // Set map coordinates with lat and lng 
     var cord = new google.maps.LatLng(28.545078,-81.377196); 

     // Set map options 
     var mapOptions = { 
      zoom: 15, 
      center: cord, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     // Set map 
     var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions); 

     // Set map marker 
     var marker = new google.maps.Marker({ 
      position: cord, 
      map: map, 
      title: 'Test' 
     }); 

    } 

    // Load Map 
    google.maps.event.addDomListener(window, 'load', initialize); 


    initialize(); 

    }); 


</script> 


<div> 

    <div id="map-canvas"style="width:600px; height:500px"></div> 

</div>

來源

2013-05-14 Sequenzia

您選擇的瀏覽器調試器中的任何錯誤消息？ – BLSully 2013-05-14 16:07:03

不，幾乎所有我嘗試的方式我只是得到一個空白頁面，Firebug顯示沒有錯誤。謝謝 – Sequenzia 2013-05-14 16:24:17

如果您的網頁那樣簡單，認爲它產生使用純JS。如果不是這樣，如果你有到使用load功能，把你的JS腳本在第2頁的正文和使用$.load("page2.php body")

P.S：考慮使用JS生成地圖，而不是使用負載。這也可以讓你將你的代碼封裝在你的代碼庫的整潔插件中，而不是重複代碼。

來源

2013-05-14 16:07:16

頁面ultamitly並不那麼簡單。還有很多事情要做，但我試圖保持簡單的問題。所以我不認爲我可以在純JS中做到這一切。我也嘗試將JS腳本移動到body並像這樣加載它 - '$ .load（「page2.php body」）'，但它沒有做任何事情。在對話框中只是一個空白頁面。謝謝！ – Sequenzia 2013-05-14 16:28:47

頁面有多空白？請記住，您需要在主體中移動** ALL **腳本標籤。這包括谷歌地圖API加載器。 – 2013-05-14 16:31:02

在對話框中，它只是一個完全空白的頁面。我可以使用firebug來查看page2正在加載，當我查看響應時，我看到所有的JS代碼。我不知道如何使這項工作。謝謝您的幫助。 – Sequenzia 2013-05-14 16:35:42

看看這個Nemikor的博客文章，應該做你想做的。

http://blog.nemikor.com/2009/04/18/loading-a-page-into-a-dialog/

基本上，叫「開」，你「負荷」與其他第一頁內容之前。

jQuery('#dialog').load('path to my page').dialog('open');

Source

來源

2013-05-14 16:07:24 MikeB

我試過像這樣加載它，但它做同樣的事情。在對話框窗口中只是一個空白頁面。謝謝！ – Sequenzia 2013-05-14 16:29:38

這裏有兩個重要的因素： -

確保所有的JavaScript/jQuery是包含父頁面上。不要試圖通過AJAX提供js。
確保僅當畫布可見時才映射初始化。初始化一個無形的畫布只是部分成功。

取決於正是你正在嘗試做的，你的代碼可能是這樣的：

$(document).ready(function() { 
    var $detailWin, 
     dialogInitialized, 
     map; 

    function getDialogContent() { 
     if(dialogInitialized) return; 
     dialogInitialized = true;//Well, at least initializing. 
     $.get('p2.php').done(function(html) { 
      $detailWin.html(html); 
      var cord = new google.maps.LatLng(28.545078, -81.377196); 
      var mapOptions = { 
       zoom: 15, 
       center: cord, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
      var marker = new google.maps.Marker({ 
       position: cord, 
       map: map, 
       title: 'Test' 
      }); 
     }).error(function(jqXHR, textStatus, errorThrown) { 
      $detailWin.text(textStatus); 
     }); 
    } 

    $detailWin = $("#detailWin").dialog({ 
     autoOpen: false, 
     modal: true, 
     width: 700, 
     height: 600, 
     show: "fade", 
     close: "fade", 
     open: getDialogContent 
    }); 

    $("#cc").on('click', function() { 
     $detailWin.dialog("open"); 
    }); 
});

注：

確保p2.php，提供了一個HTML片段包括地圖-canvas，但沒有<head>或<body>標籤，絕對沒有JavaScript。
上面的代碼執行對話框的一次性初始化（包括地圖）。如果您想在每次打開對話框時重新加載對話框（或其某些方面，如一組新標記），則會有所不同。

來源

2013-05-14 19:49:24

jQuery的對話窗口

回答

相關問題