Question

所以我正在为最终项目（高中）制作这个网站，我正在使用

    <script>
        function carregaPagina($link){
            $( "#destaques" ).load( $link );
            }
    </script>

将页面加载到div中，这样每次单击菜单上的链接时都不会刷新整个页面.HTML如下所示：

    <li>
       <a href="#" onClick="carregaPagina('contactos.php');">CONTACTOS</a>
    </li>

（仅举例）。

现在，我想在灯箱内的联系人页面上插入谷歌地图，以便显示地址，如果他们愿意，用户可以点击查看地图。我用this tutorial来获取地图。我试着将它放在联系人页面中，就像这样

    <!DOCTYPE html>
    <html>
         <head>
         <link rel="stylesheet" type="text/css" href="estilo.css">
         <script src="https://maps.googleapis.com/maps/api/js"></script>
         <script>
             function initialize() {
                   var mapCanvas = document.getElementById('map-canvas');
                   var mapOptions = {
                   center: new google.maps.LatLng(44.5403, -78.5463),
                   zoom: 8,
                   mapTypeId: google.maps.MapTypeId.ROADMAP
                   }
                var map = new google.maps.Map(mapCanvas, mapOptions)
                }
             google.maps.event.addDomListener(window, 'load', initialize);
         </script>
    </head>
    <body>
        <div id="map-canvas"></div>
    </body>
  </html>

如果我加载页面alone，但是如果我使用代码加载它，或者如果我把它放在灯箱内，就可以了，如下所示：

<body>
    <p>This is the main content. To display a lightbox click <a href =   "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>
<div id="light" class="white_content"><div id="map-canvas"></div> <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
<div id="fade" class="black_overlay"></div>
</body>

我在Stackoverflow中的某处获得了灯箱。有人可以帮帮我吗？

P.S：对不起我的英语。您可能已经注意到我的代码，它不是我的母语

Answer 1

为什么不在加载包含全宽地图的页面的地方使用iframe而不是使用加载

示例：

<div id="light" class="white_content"> 
<iframe height="300" width="300" src="map_page.php"></iframe>
 <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>

使用.load（）后在Lightbox中插入Google Map

1 个答案: