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的对话窗口

回答

相关问题